• 不断学习才有回报,学无止境!

纯CSS3动感按钮特效

DIV+CSS技巧发现 箭翎 1058次浏览 0个评论 扫描二维码

看效果:

css3按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk2312">
<title>动画动感按钮</title>
<style>
body {
background: #000;
}

.center-wrap {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
}

.button {
position: relative;
display: block;
border: 2px solid #2e2e2e;
text-transform: uppercase;
letter-spacing: .3rem;
padding: 20px 15px;
text-align: center;
max-width: 270px;
min-width: 200px;
cursor: pointer;
overflow: hidden;
-webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
}

.button a {
color: #969696;
font-family: 'Varela Round';
text-decoration: none;
}

.button .mask {
background: #fff;
background: rgba(255,255,255,0.5);
}

.button .mask {
position: absolute;
display: block;
width: 200px;
height: 100px;
-webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button .shift {
-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button:hover {
border-color: #fff;
}

.button:hover a {
color: #fff;
}

.button:hover .mask {
background: #fff;
-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}

.button:hover .shift {
padding-left: 5px;
}
</style>
</head>
<body>
<div class="center-wrap">
<div class="button">
<a href="#">Savvy Swag <span class="shift">›</span></a>
<div class="mask"></div>
</div>
</div>
</body>
</html>

箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明纯CSS3动感按钮特效
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址