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
This article describes the MySQL user rights mana...
<br />If only XHTML and CSS were object-orie...
How can I hide the scrollbars while still being a...
1. What is pip pip is a Python package management...
1. Download the tomcat image docker pull tomcat:8...
When the amount of data in MySQL is large, limit ...
Preface In the previous article, we mainly learne...
(I) Method 1: Define it in advance directly in th...
When writing my own demo, I want to use display:f...
The reason is this I wanted to deploy a mocker pl...
I recently deployed Django and didn't want to...
Table of contents Overview Checking setTimeout() ...
There are many purposes for exporting MySQL data,...
This article takes the health reporting system of...
This article describes how to use Docker's mu...