幽灵按钮

利用CSS3中的transition和transform属性做了一个比较炫酷的幽灵按钮

需要加入Jquery库

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
</head>

<body>
<div class="box">
    <div class="link link-mission">
        <span class="icon"></span>
        <a href="#" class="button" data-title="My mission is clear">
            MISSION
            <span class="line line-top"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
        </a>
    </div>
    <div class="link link-play">
        <span class="icon"></span>
        <a href="#" class="button" data-title="This is my playground">
            PLAY
            <span class="line line-top"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
        </a>
    </div>
    <div class="link link-touch">
        <span class="icon"    ></span>
        <a href="#" class="button" data-title="Let's do something together">
            TOUCH
            <span class="line line-top"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
        </a>
    </div>
    <div class="tip">
        <em></em>
        <span></span>
    </div>
</div>
<script>
    $(function(){
        $(".link .button").hover(function(){
            var title = $(this).attr("data-title");
            $(".tip em").text(title);
            var pos = $(this).offset().left;
            var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;
            var f = pos-dis;
            $(".tip").css({"left":f+"px"}).stop(true,true).animate({"top":180,"opacity":1},300);
        },function(){
            $(".tip").stop(true,true).animate({"top":160,"opacity":0},300);    
        });
    })
</script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
}

body{
    background:#333;
}

.box{
    width:1000px;
    height:280px;
    margin:50px auto;
}

.box .link{
    width:205px;
    height:280px;
    float:left;
    margin:0 20px;
}

.link span.icon{
    width:100%;
    height:190px;
    display:inline-block;
    transition:linear 0.15s;
    -moz-transition:linear 0.15s;
    -ms-transition:linear 0.15s;
    -o-transition:linear 0.15s;
    -webkit-transition:linear 0.15s;
}

.link-mission span.icon{
    background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-console.svg") no-repeat center center;
    background-size:178px 109px;
}

.link-play span.icon{
    background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-rocket.svg") no-repeat center center;
    background-size:178px 109px;
}

.link-touch span.icon{
    background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-location.svg") no-repeat center center;
    background-size:178px 109px;
}

.link .icon:hover{
    transform:rotate(360deg) scale(1.3);
}

.button{
    display:block;
    width:180px;
    height:50px;
    text-decoration:none;
    line-height:45px;
    color:#2DCB70;
    font-family:"Microsoft yahei";
    font-weight:bold;
    border:2px solid rgba(255,255,255,0.8);
    padding-left:20px;
    margin:0 auto;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-button-arrow.svg") no-repeat 130px center;
    background-size:26px 20px;
    position:relative;
    transition:ease 0.5s;
    -moz-transition:ease 0.5s;
    -ms-transition:ease 0.5s;
    -o-transition:ease 0.5s;
}

.button:hover{
    border:2px solid rgba(255,255,255,1);
    background-position:140px;
}

/*
    飞线
    top:
    1.高度不变
    2.宽度变（0-盒子宽）
    3.位置：左-右
　　left:
　　1.宽度不变
　　2.高度变（0-盒子高）
　　3.位置:底-头
…

*/
.button:hover .line{
    background:#fff;    
}

.button .line{
    position:absolute;
    display:block;
    background:none;
}

.button .line-top{
    height:2px;
    width:0px;
    left:-110%;
    top:-2px;
    transition:ease 0.5s;
    -moz-transition:ease 0.5s;
    -ms-transition:ease 0.5s;
    -o-transition:ease 0.5s;
    -transition:ease 0.5s;
}

.button:hover .line-top{
    width:100%;
    left:-2px;
}

.button .line-left{
    width:2px;
    height:0px;
    bottom:-110%;
    left:-2px;
    transition:ease 0.5s;
    -moz-transition:ease 0.5s;
    -ms-transition:ease 0.5s;
    -o-transition:ease 0.5s;
    -transition:ease 0.5s;
}

.button:hover .line-left{
    height:100%;
    bottom:-2px;
}

.button .line-right{
    width:2px;
    height:0px;
    top:-110%;
    right:-2px;
    transition:ease 0.5s;
    -moz-transition:ease 0.5s;
    -ms-transition:ease 0.5s;
    -o-transition:ease 0.5s;
    -transition:ease 0.5s;
}
.button:hover .line-right{
    height:100%;
    top:-2px;
}

.button .line-bottom{
    width:0px;
    height:2px;
    bottom:-2px;
    right:-110%;
    transition:ease 0.5s;
    -moz-transition:ease 0.5s;
    -ms-transition:ease 0.5s;
    -o-transition:ease 0.5s;
    -transition:ease 0.5s;
}
.button:hover .line-bottom{
    width:100%;
    right:-2px;
}

.box .tip{
    position:absolute;
    padding:0 14px;
    height:35px;
    line-height:35px;
    background:#2DCB70;
    color:#fff;
    top:160px;
    font-weight:bold;
    text-transform:none;
    margin:0 auto;
    border-radius:3px;
    opacity:0;
}

.tip em{
    font-style:normal;
    font-family:"Microsoft yahei";
    font-weight:100;
}

.tip span{
    position:absolute;
    width:0px;
    height:0px;
    overflow:hidden;
    border:7px solid transparent;
    border-top-color:#2DCB70;
    left:50%;
    margin-left:-3px;
    bottom:-14px;
}