CSS3 Making mouse over button effects

This article mainly introduces the use of CSS3 produced by a mouse button effect, when the mouse on the button, the button will change, produce a dynamic effect, very beautiful. A friend you need can refer to the following

Today to bring you a pure CSS3 implementation of the mouse button effect. This button is very simple, but the effect is very good, very beautiful. Look together:

The implemented code.

　　HTML code:

xml/html Code copy content to clipboard

<p align= "center" >       <p class= "Contener" >           <p class= "Txt_button" >               wifeo</p>           <p class= "Circle" >                </p>       </p>   </p>

　　CSS3 Code:

CSS Code copy content to clipboard

. contener {width:300px;     height:60px;     Background-color: #00bcd4;     line-height:60px;     Color: #ffffff;     font-weight:300;     font-family: ' Roboto ';     font-size:25px;     position:relative;     Overflow:hidden;     Cursor:pointer;   box-shadow:1px 1px 1px #333333;     }. Txt_button {position:absolute;   width:100%;     }. Contener:hover. circle{-webkit-animation:oblik 0.4s ease-in;     -webkit-transform-origin:50% 50%;     -moz-animation:oblik 0.4s ease-in;     -moz-transform-origin:50% 50%;     -ms-animation:oblik 0.4s ease-in;     -ms-transform-origin:50% 50%;     Animation:oblik 0.4s ease-in;     transform-origin:50% 50%;     width:100px;     height:100px;    border-radius:50%;     } @-webkit-keyframes Oblik {0% {opacity:1;-webkit-transform:scale (0);}      100% {Opacity:0;-webkit-transform:scale (5); Background-color: #006064;}     } @-moz-keyframes Oblik {0% {opacity:1;-moz-transform:scale (0);} 100% {opacity:0;-Moz-transform:scale (5); Background-color: #006064;}     } @-ms-keyframes Oblik {0% {opacity:1;-ms-transform:scale (0);}      100% {Opacity:0;-ms-transform:scale (5); Background-color: #006064;}     } @keyframes Oblik {0% {opacity:1;transform:scale (0);}      100% {Opacity:0;transform:scale (5); Background-color: #006064;} }

"Recommended"

1. CSS3 Free Video Tutorial

2. A detailed example of a selector in CSS3

3. A detailed description of the content attribute in CSS3

4. Detailed CSS3 10 top commands

5. Brief description of how the Web designer uses the good CSS3 technology