A collection of button hover border and background animations based on CSS properties
|
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
Recommend
React entry-level detailed notes
Table of contents 1. Basic understanding of React...
Vue elementUI implements tree structure table and lazy loading
Table of contents 1. Achieve results 2. Backend i...
The use and difference between vue3 watch and watchEffect
1.watch listener Introducing watch import { ref, ...
Detailed explanation of JS ES6 coding standards
Table of contents 1. Block scope 1.1. let replace...
Implementation of mysql8.0.11 data directory migration
The default storage directory of mysql is /var/li...
MySQL 5.7.23 decompression version installation tutorial with pictures and text
It is too troublesome to find the installation tu...
td width problem when td cells are merged
In the following example, when the width of the td...
Understanding Nginx Current Limitation in One Article (Simple Implementation)
Nginx is now one of the most popular load balance...
Summary of MySQL InnoDB locks
Table of contents 1. Shared and Exclusive Locks 2...
MySQL 8.0.22 compressed package complete installation and configuration tutorial diagram (tested and effective)
1. Download the zip installation package Click he...
Example of nginx ip blacklist dynamic ban
When a website is maliciously requested, blacklis...
How to configure Openbox for Linux desktop (recommended)
This article is part of a special series on the 2...
Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04
We will install phpMyAdmin to work with Apache on...
Detailed explanation of CSS background and border tag examples
1. CSS background tag 1. Set the background color...
How to configure Nginx to distinguish between PC or mobile phone access to different domain names
The new official website is online, but the exper...