幽灵按钮
2015-04-29 20:16
141 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幽灵按钮</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000000;
}
.btn {
display: block;
width: 180px;
height: 50px;
margin: 300px;
line-height: 50px;
text-align: center;
text-decoration: none;
color: yellow;
font-weight: bolder;
border: 2px solid rgba(255,255,255,0.5);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
transition: 0.2s ease;
-webkit-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
-moz-transition: 0.2s ease;
}
.btn:hover {
color: rgba(255,255,255,1);
border: 2px solid rgba(255,255,255,0.8);
}
/*线条共有的样式*/
.line {
position: absolute;
background: rgba(255,255,255,1);
display: block;
transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
}
/*左边的线条*/
.line-left {
width: 2px;
height: 0px;
left: -2px;
top: 148px;
}
/*右边的线条*/
.line-right {
width: 2px;
height: 0px;
right: -2px;
bottom: 148px;
}
/*顶端的线条*/
.line-top {
width: 0px;
height: 2px;
left: -102px;
top: -2px;
}
/*底端的线条*/
.line-bottom {
width: 0px;
height: 2px;
right: -102px;
bottom: -2px;
}
.btn:hover .line-left {
height: 50px;
top: -2px;
}
.btn:hover .line-right {
height: 50px;
bottom: -2px;
}
.btn:hover .line-top {
width: 180px;
left: -2px;
}
.btn:hover .line-bottom {
width: 180px;
right: -2px;
}
</style>
</head>
<body>
<a href="javascript:;" class="btn">
<!--四条线-->
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-top"></span>
<span class="line line-bottom"></span>
Hello World!
</a>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 