A collection of button hover border and background animations based on CSS properties

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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Causes and solutions for MySQL too many connections error

>>:  How to keep running after exiting Docker container

Recommend

Example analysis of mysql user rights management

This article describes the MySQL user rights mana...

Object-Oriented Programming with XHTML and CSS

<br />If only XHTML and CSS were object-orie...

Example code for hiding element scrollbars using CSS

How can I hide the scrollbars while still being a...

Docker installation tomcat dubbo-admin instance skills

1. Download the tomcat image docker pull tomcat:8...

Bootstrap 3.0 study notes grid system case

Preface In the previous article, we mainly learne...

Detailed explanation of two quick ways to write console.log in vscode

(I) Method 1: Define it in advance directly in th...

CSS achieves highly adaptive full screen

When writing my own demo, I want to use display:f...

How to install mysql in docker

I recently deployed Django and didn't want to...

How to make JavaScript sleep or wait

Table of contents Overview Checking setTimeout() ...

Detailed explanation of several ways to export data in Mysql

There are many purposes for exporting MySQL data,...

Docker+selenium method to realize automatic health reporting

This article takes the health reporting system of...

How to reduce image size using Docker multi-stage build

This article describes how to use Docker's mu...