Brief Tutorial
This is a set of mouse-over button animation special effects made using CSS3 animation. This set of mouse-over button animations has 13 final effects, all of which are created by pseudo-elements of buttons and CSS3 animation.
##View Demo Download plug-in
How to use
HTML structure
This effect uses hyperlinks to create buttons. For example, the HTML code of the first Swipe effect is ：
<a class="btn-0" href="#">Swipe</a>
CSS style
## For convenience, the special effects are except , All elements except , , , and have animated transitions added.html *,
html *:before,
html *:after {
box-sizing: border-box;
-webkit-transition: 0.5s;
transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
-webkit-transition: none;
transition: none;
}Copy after login
a {
text-decoration: none;
line-height: 80px;
color: black;
}
[class^="btn-"] {
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 80px;
max-width: 250px;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}Copy after login
.btn-0 {
color: #9a3789;
}
.btn-0:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80px;
background: #520c46;
}Copy after login
.btn-0:hover {
color: #e1c4dc;
}
.btn-0:hover:before {
width: 250px;
}Copy after login
.btn-0:active {
background: #881474;
}Copy after login
The above is the detailed content of Detailed example of mouse over button special effects based on CSS3 animation. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
