Today, for each user to bring a CSS implementation of the mouse through the button effect. When the button is initially, the border is a disconnected button, and the animation changes to a closed border when the mouse passes over the button. The effect chart is as follows:
Let's look at the implementation code together:
HTML code:
The
code is as follows:
<body>
<a target= "_blank" class= "Btn-edge" Href=http://www.jb51.net>hover me</a>
</body>
CSS code:
The
code is as follows:
*, *: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:700;
Text-decoration:none;
Font-size:3rem;
color: #333;
background-image:-webkit-gradient (linear, left top, left bottom, from (#333), to (#333)),-webkit-gradient (linear, L EFT Top, left Bottom, from (#333), to (#333),-webkit-gradient (linear, left top, left bottom, from (#333), to (#333),-webki T-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, le FT bottom, from (#333), 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, 99, 71, 0);
box-shadow:inset 0 0 0 5px Rgba (255, 99, 71, 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;
}
