Today I would like to share with you 5 stunning mouse sliding button animations based on CSS3. These 5 buttons have stunning animation effects when the mouse passes over them. These 5 buttons are suitable for browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, and World Window. IE8 and below browsers are not supported. The renderings are as follows:
Online preview Source code download
Implemented code.
html code:
<div id="wrap"> <a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">火箭</span> <span class="title-hover">带你飞</span> </a><a href="#" class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">下载</span> <span class="title-hover2">点击下载</span> </a> </div> <link rel="stylesheet" type="text/css" href="css/btn2.css"> <div class="container1"> <div class="con_down1"> <i class="fa fa-download fa-2x"></i> <h4> Download Now</h4> </div> <div class="con_sizes1"> <div class="sizes1"> <h5 class="size1"> 34.5 MB</h5> <div class="sizes_abs1"> </div> </div> </div> </div> <div class="container2"> <div class="con_down2"> <i class="fa fa-download fa-2x"></i> <h4> Download now</h4> </div> <div class="con_sizes2"> <div class="sizes2"> <h5 class="size2"> 34.5 MB</h5> <div class="sizes_abs2"> </div> </div> </div> </div> <div> <br /> <br /> </div> <link rel="stylesheet" type="text/css" href="css/btn3.css"> <div class="center"> <a class="spinningeffect" href="#" target="_blank"> <img src="img/blogger-logo1.jpg" /> </a> </div> <div> <br /> </div> <link rel="stylesheet" type="text/css" href="css/focus.css"> <div class="center"> <a class="zoomeffect" href="#" target="_blank"> <img src="img/addfocus.jpg" /></a> </div> <div> <br /> </div> <link rel="stylesheet" type="text/css" href="css/btn4.css"> <div class="mudwnpbutton center"> <a href="#" target="blank" rel="nofollow">预览</a> </div> <link rel="stylesheet" type="text/css" href="css/btn5.css"> <div class="whitebuttondemo"> <a href="#">button</a> <span class="up">message</span> </div> <div> <br /> <br /> </div> <div class="whitebutton"> <a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB .rar </span> </div> <div> </div>
via: http://www.w2bc.com/Article/19453
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
