CSS3 implementation of mouse through button effects

Today for each netizen to bring a CSS implementation of the mouse through the button effect. When the button is initially, the border is a broken button, and the animation changes to a closed border when the mouse passes over the button. As follows:

Online preview Source Download

Let's take a look at the implementation code:

HTML code:

< Body >    <  target= "_blank"  class= "Btn-edge"  href= "http// Www.w2bc.com/shili ">Hover Me</a></ Body >

CSS code:

*, *:before, *:after{margin:0;padding:0;-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box; }Body{Padding-top:10%;text-align:Center;Overflow-x:Hidden; }. Btn-edge{position:relative;Display:Inline-block;padding:1rem 2rem;font-family:' Titillium Web ', Sans-serif;Font-weight: the;text-decoration:None;font-size:3rem;Color:#333;Background-image:-webkit-gradient (linear, left top, left bottom, from (#333), to (#333)),-webkit-gradient (linear, left top, left bottom , from (#333), to (#333)),-webkit-gradient (linear, left top, left bottom, from (#333), to (#333)),-webkit-gradient (linear, Left top, left bottom, from (#333), to (#333)),-webkit-gradient (linear, left top, left bottom, from (#333), to (#333)),-WEBK It-gradient (linear, left top, left bottom, from (#333), to (#333)),-webkit-gradient (linear, left top, left bottom, from (#33 3), to (#333)),-webkit-gradient (linear, left top, left bottom, from (#333), to (#333));Background-image:-webkit-linear-gradient (#333, #333),-webkit-linear-gradient (#333, #333),-webkit-linear-gradient (#333, #333),- Webkit-linear-gradient (#333, #333),-webkit-linear-gradient (#333, #333),-webkit-linear-gradient (#333, #333),- Webkit-linear-gradient (#333, #333),-webkit-linear-gradient (#333, #333);Background-image:linear-gradient (#333, #333), Linear-gradient (#333, #333), Linear-gradient (#333, #333), Linear-gradient (#333, #333 ), Linear-gradient (#333, #333), Linear-gradient (#333, #333), Linear-gradient (#333, #333), Linear-gradient (#333, #333) ;background-repeat:no-repeat;-webkit-background-size:2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;background-size:2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;background-position:0 0, 100% 0, 0 100%, 100% 100%;-webkit-box-shadow:inset 0 0 0 5px rgba (255, ©, 0);Box-shadow:inset 0 0 0 5px rgba (255, ©, 0);-webkit-transition:background-size 1s. 4s,-webkit-box-shadow. 4s, color. 4s;transition:background-size 1s. 4s, box-shadow. 4s, color. 4s;-webkit-transform:Translatez (0);Transform:Translatez (0); }. Btn-edge:hover{Color:Tomato;-webkit-background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;-webkit-box-shadow:inset 0 0 0 5px Tomato;Box-shadow:inset 0 0 0 5px Tomato;-webkit-transition:background-size 1s,-webkit-box-shadow. 4s. 6s, color. 4s. 6s;transition:background-size 1s, box-shadow. 4s. 6s, color. 4s. 6s; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/6366

CSS3 implementation of mouse through button effects