CSS3鼠标悬停动画按钮 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{background:#333;}

        .button_box{width:902px;margin:40px auto 0 auto;}
        .button_link{display:inline-block;position:relative;text-decoration:none;font-size:15px;color:#33ab6a;font-weight:bold;width:255px;text-align:center;height:100px;line-height:56px;border:2px solid rgba(255,255,255,.8);margin:20px 96px;padding:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
        .button_link:hover{border:2px solid rgba(255,255,255,1);}
        .button_link .line{display:inline-block;background-color:#FFF;position:absolute;-webkit-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}

        .button_link .line_top{height:2px;width:0;left:-50%;top:-2px;}
        .button_link:hover .line_top{width:100%;left:-2px;}

        .button_link .line_right{height:0;width:2px;top:-50%;right:-2px;}
        .button_link:hover .line_right{height:100%;top:-2px;}

        .button_link .line_bottom{width:2px;height:0;bottom:-50%;left:-2px;}
        .button_link:hover .line_bottom{height:100%;bottom:-2px;}
        
        .button_link .line_left{height:2px;width:0;right:-50%;bottom:-2px;}
        .button_link:hover .line_left{width:100%;right:-2px;}

    </style>
</head>
<body>
    <div class="button_box">
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
    <!--     <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a>
        <a href="#" class="button_link">
            css3悬停动画
            <span class="line line_top"></span>
            <span class="line line_right"></span>
            <span class="line line_bottom"></span>
            <span class="line line_left"></span>
        </a> -->
    </div>
</body>
</html>

 

posted @ 2016-09-07 15:12  chenxj  阅读(113)  评论(0)    收藏  举报