一款css实现的鼠标经过按钮的特效
网站建设 2023-01-28 21:39www.1681989.com免费网站
今天要为各网友再带来一款css实现的鼠标经过按钮的特效。按钮初始时，边框为断开的按钮，当鼠标经过按钮时动画变为封闭的边框。效果图如下
我们一起看下实现的代码
html代码
<body>
<a target="_blank" class="btn-edge" href=https://.jb51.>Hover Me</a>
</body>
css代码
, :before, :after
{
marg: 0;
paddg: 0;
-webkit-box-sizg: border-box;
-moz-box-sizg: border-box;
box-sizg: border-box;
}
body
{
paddg-: 10%;
text-align: center;
overflow-x: hidden;
}
.btn-edge
{
position: relative;
display: le-block;
paddg: 1rem 2rem;
font-family: 'Titillium Web' , sans-serif;
font-weight: 700;
text-decoration: none;
font-size: 3rem;
color: #333;
background-image: -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333));
background-image: -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333);
background-image: lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-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: set 0 0 0 5px rgba(255, 99, 71, 0);
box-shadow: set 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: set 0 0 0 5px tomato;
box-shadow: set 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;
}
我们一起看下实现的代码
html代码
复制代码
代码如下:<body>
<a target="_blank" class="btn-edge" href=https://.jb51.>Hover Me</a>
</body>
css代码
复制代码
代码如下:, :before, :after
{
marg: 0;
paddg: 0;
-webkit-box-sizg: border-box;
-moz-box-sizg: border-box;
box-sizg: border-box;
}
body
{
paddg-: 10%;
text-align: center;
overflow-x: hidden;
}
.btn-edge
{
position: relative;
display: le-block;
paddg: 1rem 2rem;
font-family: 'Titillium Web' , sans-serif;
font-weight: 700;
text-decoration: none;
font-size: 3rem;
color: #333;
background-image: -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333)), -webkit-gradient(lear, left , left bottom, from(#333), to(#333));
background-image: -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333), -webkit-lear-gradient(#333, #333);
background-image: lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-gradient(#333, #333), lear-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: set 0 0 0 5px rgba(255, 99, 71, 0);
box-shadow: set 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: set 0 0 0 5px tomato;
box-shadow: set 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;
}