案例
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>button</title>
<link rel="stylesheet" href="D:\HTML\button\css\style.css">
</head>
<body>
<div class="box">
<div class="link link-miss">
<span class="icon"></span>
<a href="#" class="button">
<span class="line top"></span>
<span class="line right"></span>
<span class="line bottom"></span>
<span class="line left"></span>
MISSION</a>
</div>
<div class="link link-play">
<span class="icon"></span>
<a href="#" class="button">
<span class="line top"></span>
<span class="line right"></span>
<span class="line bottom"></span>
<span class="line left"></span>
PLAY</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button">
<span class="line top"></span>
<span class="line right"></span>
<span class="line bottom"></span>
<span class="line left"></span>
MISSION</a>
</div>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
}
body{
background: #333;
}
.box{
width: 800px;
height: 280px;
margin: 50px auto;
}
.box .link{
width: 205px;
height: 280px;
float: left;
margin: 0 20px;
}
.link .icon{
display: inline-block;
width: 100%;
height: 190px;
transition:all 0.2s ease-out;
}
.link-miss .icon{
background: url() no-repeat center center;
}
.link-play .icon{
background: url() no-repeat center center;
}
.link-touch .icon{
background: url() no-repeat center center;
}
.link .icon:hover{
-webkit-transform:rotate(360deg) scale(1.2);
}
.button{
display: block;
width: 180px;
height: 50px;
position: relative;
line-height: 50px;
text-decoration: none;
color: #2DCB70;
font-family: Arial;
font-weight: bolder;
border:2px solid rgba(255,255,255,0.8);
padding-left: 20px;
margin: 0 auto;
background: url() no-repeat 130px center;
}
.button:hover{
border: 2px solid rgba(255,255,255,1);
background-position: 140px center;
transition:0.4s ease;
}
.button .line{
display: block;
position: absolute;
background: none;
transition:0.4s ease;
}
.button:hover .line{
background: #fff;
}
.button .line-top{
height: 2px;
width: 0px;
left: -110px;
top: -2px;
}
.button:hover .line-top{
width: 100%;
left: -2px;
}
.button .line-right{
width: 2px;
height: 0px;
right: -2px;
top: -110%;
}
.button:hover .line-right{
height: 100%;
top:-2px;
}
.button .line-bottom{
width: 2px;
height: 0px;
left: -2px;
bottom: -110%;
}
.button:hover .line-bottom{
height: 100%;
bottom: -2px;
}
.button .line-left{
width: 0px;
height: 2px;
right: -110%;
bottom: -2px;
}
.button:hover .line-left{
width: 100%;
right: -2px;
}
传统input标签
可直接在按钮中贴背景图。但是用CSS给input标签贴图,只能做宽高固定死的,不能做任意长度。
a标签
没有默认事件。
可以用CSS模拟成按钮外观,并做到宽度自适应。
可以增加上交互效果,且浏览器均兼容。