<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>qdabc.cn</title>
<style>
div{
text-align:center;
}
a {
margin:10px 0;
border: none;
font-family: 'Lato', sans-serif;
font-size: 20px;
line-height: 0px;
color: #fff;
cursor: pointer;
width:308px;
padding: 25px 58px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
background-color: rgba(255, 212, 64, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
position:relative;
z-index: 9999;
}
a:after {
content:"";
width: 100%;
height: 0;
position:absolute;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
color:#000;
}
a:hover{
color:#000;
background-color: rgba(255, 212, 64, 0.9);
}
a:hover:after {
height: 560%;
opacity: 1;
z-index: -1;
}
</style>
</head>
<body>
<div>
<a>登录</a><br />
<a>登录</a><br />
<a>登录</a><br />
<a>登录</a><br />
<a>登录</a><br />
</div>
</body>
</html>
欢迎分享本文,转载请保留出处:前端ABC » css3按钮效果