<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3 Hover按钮边框动画特效 - 网页模板</title>
<style>
html,body{
height:80%;
background:#C1EBFF;
}
body{
text-align:center;
}
body:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
button{
background:#1AAB8A;
color:#fff;
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#fff;
color:#1AAB8A;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #1AAB8A;
transition:400ms ease all;
}
button:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
</style>
</head>
<body>
<button>Hover me !</button>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
纯CSS3 Hover按钮边框动画特效.zip
版权申诉
48 浏览量
2022-11-25
10:22:14
上传
评论
收藏 1KB ZIP 举报
纯CSS3 Hover按钮边框动画特效.zip （1个子文件） 
纯CSS3 Hover按钮边框动画特效 jiaoben4867 
index.html 1KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
