1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>幽灵按钮</title>
6 <link rel="stylesheet" type="text/css" href="css/幽灵按钮.css">
7 </head>
8 <body>
9 <div class="content">
10 <div class="box box-mission">
11 <span class="icon"></span>
12 <!-- 按钮 -->
13 <a href="#" class="button">
14 <span class="line line-top"></span>
15 <span class="line line-right"></span>
16 <span class="line line-bottom"></span>
17 <span class="line line-left"></span>
18 MISSION
19 </a>
20 </div>
21 <div class="box box-play">
22 <span class="icon"></span>
23 <a href="#" class="button">
24 <span class="line line-top"></span>
25 <span class="line line-right"></span>
26 <span class="line line-bottom"></span>
27 <span class="line line-left"></span>
28 PLAY
29 </a>
30 </div>
31 <div class="box box-touch">
32 <span class="icon"></span>
33 <a href="#" class="button">
34 <span class="line line-top"></span>
35 <span class="line line-right"></span>
36 <span class="line line-bottom"></span>
37 <span class="line line-left"></span>
38 TOUCH
39 </a>
40 </div>
41 </div>
42 </body>
43 </html>
1 *{margin: 0;padding: 0;}
2 body{background: #333;}
3 .content{width: 1000px;height: 400px;margin:50px auto;}
4 @media screen and (min-width: 1000px){.content .box{width: 205px;height: 220px;float: left;margin:0 60px;}}
5 @media screen and(max-width: 500px){.content .box{width: 205px;height: 220px;}}
6 /*三个图片动画*/
7 .box-mission .icon{width: 174px;height: 155px;display: block;background:url(../img/游戏手柄.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;}
8 .box-play .icon{width: 174px;height: 155px;display: block;background:url(../img/火箭.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;}
9 .box-touch .icon{width: 174px;height: 155px;display: block;background:url(../img/地图.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;}
10 .box-mission .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);}
11 .box-play .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);}
12 .box-touch .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);}
13
14 /*按钮*/
15 .box .button{width: 156px;height: 45px;line-height: 50px;display: block;margin: 20px auto;font-family: "微软雅黑";font-size: 18px;font-weight: bolder;color: #2ecc71;text-decoration: none;background: url(../img/右键.svg) no-repeat 127px;padding: 0 20px;border: 2px solid rgba(255,255,255,.8);transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;position: relative;}
16 .box .button:hover{background-position: 135px center;}
17 /*设直线条*/
18 .box .line{background-color: #2ecc71;display: block;position: absolute;transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;}
19 /*顶部:从左到右过渡到按钮的上边框位置,高度不变2px,宽度由0到200px;*/
20 .box .line-top,.box .line-bottom{width: 0px;height: 2px;}
21 .box .line-top{top:-2px;left: -100px;}
22 .box .button:hover .line-top{width: 200px;left: -2px;}
23
24 /*底部:从右到左过渡到按钮的上边框位置,高度不变2px,宽度由0到200px;*/
25 .box .line-bottom{bottom:-2px;right: -100px;}
26 .box .button:hover .line-bottom{width: 200px;right: -2px;}
27 /*左部:从下向上过渡到按钮的左边框位置,宽度不变2px;宽度由0到49px;*/
28 .box .line-left,.box .line-right{width: 2px;height: 0px;}
29 .box .line-left{bottom: -80px;left: -2px;}
30 .box .button:hover .line-left{height: 49px;bottom: -2px;}
31 /*右部:从上向下过渡到按钮的左边框位置,宽度不变2px;宽度由0到49px;*/
32 .box .line-right{top: -80px;right: -2px;}
33 .box .button:hover .line-right{height: 49px;top: -2px;}
![](https://images2015.cnblogs.com/blog/1057775/201702/1057775-20170215190051691-1412376681.png)