纯CSS3鼠标滑过按钮过滤特效
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3鼠标滑过按钮过滤特效</title>
</head>
<style type="text/css">
body{
background:#7962F2;
background-size:cover;
}
.wrapper{
width:100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.animBtn{
position: relative;
display: block;
width: 180px;
margin: 30px auto 0;
padding: 14px 15px;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.2);
color: #fff;
text-align: center;
text-decoration: none;
text-transform: capitalize;
overflow: hidden;
letter-spacing: .08em;
text-shadow:0 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
a.animBtn:after {
content: "";
width: 0%;
height: 0%;
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
background: #fff;
border-radius: 50%;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
a.animBtn:hover{
color: #666;
font-weight: 800;
text-shadow: none;
border-radius: 10px;
}
a.animBtn:hover:after {
height: 450%;
width:110%;
opacity: 1;
}
</style>
<body>
<div class="wrapper">
<a href="#" class="animBtn themeD">mr · g</a>
</div>
</body>
</html>
网友评论