analysis
The main use of CSS3 transition, animation, transform also have a gradient background and other characteristics.
- Because the button has a different style when the mouse enters, it is necessary to apply another background style to the hover state:
- By adding an empty element to the button's: after state, and giving it a border so that when the mouse enters we let the hidden empty element grow until it fades out, and we get the effect we see.
Building a basic button style
As an example, our page will be very simple, put a label as a button, and then write the style to make it look more like a button. and defined well: after element.
1 <styletype= "Text/css">2 . Button{3 cursor:Pointer;4 text-decoration:None;5 padding:10px;6 Color:#fff;7 Border-radius:10px;8 position:Absolute;9 Top:100px;Ten Left:48%; One background:linear-gradient (#93c, #50c); A Border:1px solid Purple; - } - . Button:after{ the content: ""; - position:Absolute; - Top:0; - Left:0; + width:100%; - Height:100%; + Border-radius:10px; A Opacity:0; at Border:1px solid Purple; - } - . Button:hover{ - background:linear-gradient (#b5e, #93c); - } - </style> in <Body> - <aclass= "button"href= "javascript:void (0);" >Fake Button</a> to </Body>
Add animations
First define the animation with KeyFrames
1 @-webkit-keyframes Boom {2 0% {3 opacity:04 }5 5% {6 opacity:17 }8 100% {9 -webkit-transform:scale (1.3);Ten Transform:scale (1.3); One opacity:0 A } - } - @keyframes Boom { the 0% { - opacity:0 - } - 5% { + opacity:1 - } + 100% { A Transform:scale (1.3); at Transform:scale (1.3); - opacity:0 - } -}
and apply it to the hidden element behind the button.
{ -webkit-animation: boom 0.5s ease; animation: boom 0.5s ease;}
Extended
In addition, I also found a jquery plugin jquery.twinkle specifically to do such an effect, because it is done by JS, so the principle is completely different from the above, but the plug-in provides a rich effect, and very dazzling very creative, we can go to enjoy the next. The following is an effect.
CSS3 create a border to spread around the button effect