Mouse hover animation button implemented by pure CSS3

Today to bring you a pure CSS3 implementation of the mouse hover animation button. This button mouse passes through the square, and when the mouse passes through the form of animation into a circle. As follows:

Online preview Source Download

The implemented code.

HTML code:

< Div >        < span ></ span >    </ Div >

CSS3 Code:

Body{Background-color:#333; }Div{width:200px;Height:200px;margin:0 Auto; }span{position:relative;width:180px;Height:180px;Display:Block;margin:Auto;Top:25px;Border:20px Solid Rgba (255, 255, 0,.);Background-color:Rgba (124,155,13,1);-webkit-transition:. 5s;-moz-transition:. 5s;-ms-transition:. 5s;transition:. 5s;Border-radius:30px 0px 30px 0px; }Span:before, Span:after{position:Absolute;Display:Block;Background-color:#fff;Border-radius:10px;margin:Auto;Top:0px;Bottom:0px; Left:0px; Right:0px; }Span:before{width:100px;Height:10px;content: ""; }Span:after{width:10px;Height:100px;content: ""; }Div:hover span{-webkit-transform:Scale (. 5) Rotate (45deg);-moz-transform:Scale (. 5) Rotate (45deg);-ms-transform:Scale (. 5) Rotate (45deg);Transform:Scale (. 5) Rotate (45deg);Border-radius:110px;Background-color:Rgba (112,18,255,1); }

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

Mouse hover animation button implemented by pure CSS3