Heart Attributes opacity: .999 creates a stacking context for the element so that the animations of buttons 6 and 8 are not obscured by the background left/top: -1px makes the pseudo element coincide with the button position, the reason is as follows transition-delay The horizontal and vertical border animations produce a subtle delay effect z-index: -1 prevents the color block generated by the animation from covering the button text The absolute element with left/top/right/bottom set is positioned relative to the padding-box of the parent element, so the pseudo-element here needs to move a border distance to coincide with the position of the button, otherwise the following effect will occur: You can see that there is a 1px distance between the green border and the gray border <div class="main-container"> <section> <button class="btn btn-green btn-border-o">Button 1</button> <button class="btn btn-blue btn-border">Button 2</button> <button class="btn btn-purple btn-border-rev-o">Button Three</button> <button class="btn btn-navy btn-border-rev">Button 4</button> </section> <section> <button class="btn btn-orange btn-fill-vert-o">Button Five</button> <button class="btn btn-red btn-fill-vert">Button 6</button> <button class="btn btn-green btn-fill-horz-o">Button 7</button> <button class="btn btn-blue btn-fill-horz">Button Eight</button> </section> </div> *, *:before, *:after { transition: all 0.3s; } section { position: relative; padding: 5px 0 5px; text-align: center; } .btn { position: relative; display: inline-block; line-height: 35px; margin: 8px; padding: 0 15px; font-size: 15px; border-radius: 3px; opacity: .999; cursor: pointer; } .btn-border-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-o:before, .btn-border-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-o:before { left: 0; top: -1px; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-o:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-o:hover:before { width: 100%; } .btn-border-o:hover:after { height: 100%; } .btn-border-o.btn-green:before, .btn-border-o.btn-green:after { border-color: #2ecc71; } .btn-border-o.btn-green:hover { color: #2ecc71; } .btn-border { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border:before, .btn-border:after { position: absolute; content: ''; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border:before { top: -1px; left: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border:hover { background-color: transparent; } .btn-border:hover:before { width: 100%; } .btn-border:hover:after { height: 100%; } .btn-border.btn-blue:before, .btn-border.btn-blue:after { border-color: #3498db; } .btn-border.btn-blue:hover { color: #3498db; } .btn-border-rev-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-rev-o:before, .btn-border-rev-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev-o:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-rev-o:after { left: -1px; bottom: 0; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-rev-o:hover:before { width: 100%; } .btn-border-rev-o:hover:after { height: 100%; } .btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after { border-color: #9b59b6; } .btn-border-rev-o.btn-purple:hover { color: #9b59b6; } .btn-border-rev { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border-rev:before, .btn-border-rev:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; } .btn-border-rev:after { bottom: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; transition-delay: 0.05s; } .btn-border-rev:hover { background-color: transparent; } .btn-border-rev:hover:before { width: 100%; } .btn-border-rev:hover:after { height: 100%; } .btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after { border-color: #34495e; } .btn-border-rev.btn-navy:hover { color: #34495e; } .btn-fill-vert-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-vert-o:before, .btn-fill-vert-o:after { content: ''; position: absolute; left: 0; width: 100%; height: 0; opacity: 0; z-index: -1; } .btn-fill-vert-o:before { top: 50%; } .btn-fill-vert-o:after { bottom: 50%; } .btn-fill-vert-o:hover { color: #fff; } .btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after { height: 50%; opacity: 1; } .btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after { background-color: #e67e22; } .btn-fill-vert-o.btn-orange:hover { border-color: #e67e22; } .btn-fill-vert { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-vert:before, .btn-fill-vert:after { content: ''; position: absolute; width: 100%; height: 0; opacity: 0; left: 0; z-index: -1; } .btn-fill-vert:before { top: 50%; } .btn-fill-vert:after { bottom: 50%; } .btn-fill-vert:hover { color: #fff; } .btn-fill-vert:hover:before, .btn-fill-vert:hover:after { height: 50%; opacity: 1; } .btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after { background-color: #e74c3c; } .btn-fill-vert.btn-red:hover { border-color: #e74c3c; } .btn-fill-horz-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-horz-o:before, .btn-fill-horz-o:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz-o:before { left: 50%; } .btn-fill-horz-o:after { right: 50%; } .btn-fill-horz-o:hover { color: #fff; } .btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after { width: 50%; opacity: 1; } .btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after { background-color: #2ecc71; } .btn-fill-horz-o.btn-green:hover { border-color: #2ecc71; } .btn-fill-horz { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-horz:before, .btn-fill-horz:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz:before { left: 50%; } .btn-fill-horz:after { right: 50%; } .btn-fill-horz:hover { color: #fff; } .btn-fill-horz:hover:before, .btn-fill-horz:hover:after { width: 50%; opacity: 1; } .btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after { background-color: #3498db; } .btn-fill-horz.btn-blue:hover { border-color: #3498db; } Summarize The above is a collection of button hover borders and background animations based on CSS properties that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Causes and solutions for MySQL too many connections error
>>: How to keep running after exiting Docker container
Table of contents 1. Basic understanding of React...
Table of contents 1. Achieve results 2. Backend i...
1.watch listener Introducing watch import { ref, ...
Table of contents 1. Block scope 1.1. let replace...
The default storage directory of mysql is /var/li...
It is too troublesome to find the installation tu...
In the following example, when the width of the td...
Nginx is now one of the most popular load balance...
Table of contents 1. Shared and Exclusive Locks 2...
1. Download the zip installation package Click he...
When a website is maliciously requested, blacklis...
This article is part of a special series on the 2...
We will install phpMyAdmin to work with Apache on...
1. CSS background tag 1. Set the background color...
The new official website is online, but the exper...