时间：2019-05-24 浏览量： 收藏
css3线性动画—按钮悬停效果
简体中文
繁體中文
English
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮悬停效果</title>
<style>
html,body{
height:100%;
background:#ffebff;
}
body{
text-align:center;
}
body:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
button{
background:#fff;
color:#f90;
border:none;
position:relative;
width:300px;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover{
}
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>xmsmwl.cn</button>
</body>
</html>
RELATED RECOMMEND
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 
闽公网安备 35020502000640号 网站地图 AI内容索引
关键词聚合
