Today I will share with you an animated button implemented purely in CSS3. The buttons in the first row animate the background color when the mouse passes over, and the icons fly in from the right. The buttons in the second row animate the borders when the mouse passes over, and the icons fly in from the right. The effect is very good. Let’s take a look at the renderings. :
Online preview Source code download
Implemented code.
html code:
<div class="black"> <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#" class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span> Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign Up</span> <i class="up">→</i> </a> </div> <div class="white"> <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#" class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span> Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign Up</span> <i class="up">→</i> </a> </div>
css3 code:
body { } h1 { font-family: "Abril Titling" , Georgia, serif; color: #f9f9f9; letter-spacing: 1px; } body div { padding: 60px 0; text-align: center; height: 80px; margin-top: 0; } .black { background: #262D28; } .white { background: #f9f9f9; } a { display: inline-block; margin: 10px; } .btn { position: relative; width: 160px; padding: 1.2rem 3rem; border: 1px solid #0AA944; font-size: 15px; text-decoration: none; color: #f9f9f9; font-family: "Tablet Gothic" , sans-serif; text-transform: uppercase; font-weight: 300; letter-spacing: 1.5px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .white .btn { color: #262D28; border: 2px solid #0AA944; } .btn span { position: relative; top: 2px; left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .btn i { opacity: 0; position: absolute; margin-top: -21px; top: 2.5rem; left: 120%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .btn:hover { background: rgba(255,255,255, .9); border: 1px solid rgba(0,0,0,1); } .white .btn:hover { background: rgba(0,0,0, .02); border: 2px solid rgba(0,0,0,1); } .btn:hover span { color: #333; left: -20px; } a.btn:hover i { opacity: 1; left: 80%; color: #333; -webkit-transform: scale(1.2); } a.btn:hover .up { -webkit-transform: rotate(270deg); } a.btn:hover .down { -webkit-transform: rotate(90deg); }
How to create a web page in python
What are the Python artificial intelligence frameworks?
Introduction to parametric modeling software
The difference between scratch and python
What should I do if the Chinese restart setting of vscode does not take effect?
Virtual currency trading platform
How to solve Java stack overflow exception
How to share printer in win10
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
