在网页制作中,按钮是必不可少的,每个按钮也有不同的功能,当然,更加炫酷的按钮也会让用户感兴趣,甚至还想多玩几下.下面我就简单介绍一种简单的按钮:
本身只能看到一个按钮,当鼠标悬停在按钮上时,会上下同时拉出两个框,这是只用到了css样式,具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.button01 {
width: 200px;
margin: 50px auto 20px auto;
}
.button01 a{
display: block;
width: 200px;
height: 50px;
background-color:#00b7ea ;
text-align: center;
line-height:50px;
color: #FFFFFF;
font-size:20px;
text-decoration:none;
text-transform: uppercase;
border-radius:10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}
*{
margin: 0px; padding:0px;
}
.button01 p {
background: #222;
height: 40px;
width: 180px;
color:#FFFFFF;
text-align: center;
line-height: 40px;
border-radius:10px;
box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
margin-left: 10px;
margin-top: -45px;
position: absolute;
z-index: -1;
-webkit-transition: margin 1s;/*过渡效果*/
}
.button01:hover .top{
margin-top: -80px;
}
.button01:hover .bottom{
margin-top: 0px;
}
</style>
</head>
<body>
<div class="button01">
<a href="#">按钮</a>
<p class="top">点我下载</p>
<p class="bottom">文件大小1MB</p>
</div>
</body>
</html>
如果你们有更多跟炫酷的按钮样式,欢迎分享.
来源:oschina
链接:https://my.oschina.net/u/4336151/blog/3519288