5 animated mouse slide buttons based on CSS3

Today, we share 5 animated mouse slide buttons based on CSS3. These 5 buttons have a stunning animated effect when the mouse passes. These 5 buttons apply to browsers: , FireFox, Chrome, Safari, Opera, Proud Tour, Sogou, window of the world. IE8 and the following browsers are not supported. As follows:

Online preview Source Download

The implemented code.

HTML code:

<DivID= "Wrap"> <ahref="#"class= "Btn-slide"><spanclass= "Circle"><Iclass= "fa fa-rocket"></I></span> <spanclass= "title">Rocket</span> <spanclass= "Title-hover">Take you to fly</span> </a><ahref="#"class= "Btn-slide2"><spanclass= "Circle2"><Iclass= "fa fa-download"></I></span><spanclass= "Title2">Download</span> <spanclass= "Title-hover2">Click to download</span> </a> </Div> <Linkrel= "stylesheet"type= "Text/css"href= "Css/btn2.css"> <Divclass= "Container1"> <Divclass= "Con_down1"> <Iclass= "fa fa-download fa-2x"></I> <h4>Download Now</h4> </Div> <Divclass= "Con_sizes1"> <Divclass= "Sizes1"> <h5class= "Size1">34.5 MB</h5> <Divclass= "SIZES_ABS1"> </Div> </Div> </Div> </Div> <Divclass= "Container2"> <Divclass= "Con_down2"> <Iclass= "fa fa-download fa-2x"></I> <h4>Download Now</h4> </Div> <Divclass= "Con_sizes2"> <Divclass= "Sizes2"> <h5class= "Size2">34.5 MB</h5> <Divclass= "SIZES_ABS2"> </Div> </Div> </Div> </Div> <Div> <BR/> <BR/> </Div> <Linkrel= "stylesheet"type= "Text/css"href= "Css/btn3.css"> <Divclass= "Center"> <aclass= "Spinningeffect"href="#"Target= "_blank"> <imgsrc= "Img/blogger-logo1.jpg" /> </a> </Div> <Div> <BR/> </Div> <Linkrel= "stylesheet"type= "Text/css"href= "Css/focus.css"> <Divclass= "Center"> <aclass= "Zoomeffect"href="#"Target= "_blank"> <imgsrc= "Img/addfocus.jpg" /></a> </Div> <Div> <BR/> </Div> <Linkrel= "stylesheet"type= "Text/css"href= "Css/btn4.css"> <Divclass= "Mudwnpbutton Center"> <ahref="#"Target= "blank"rel= "nofollow">Preview</a> </Div> <Linkrel= "stylesheet"type= "Text/css"href= "Css/btn5.css"> <Divclass= "Whitebuttondemo"> <ahref="#">button</a> <spanclass= "Up">Message</span> </Div> <Div> <BR/> <BR/> </Div> <Divclass= "Whitebutton"> <ahref="#">button</a> <spanclass= "Up">Top message</span> <spanclass= "Down">1.6MB. rar</span> </Div> <Div> </Div>

via:http://www.w2bc.com/article/19453

5 animated mouse slide buttons based on CSS3