css3实现的鼠标经过按钮特效

浏览数：33 / 时间：2015年06月09日

今天要为各网友再带来一款css实现的鼠标经过按钮的特效。按钮初始时，边框为断开的按钮，当鼠标经过按钮时动画变为封闭的边框。效果图如下：

我们一起看下实现的代码：

html代码：

<body>
    <a target="_blank" class="btn-edge" href="http://www.w2bc.com/shili">Hover Me</a>
</body>

css代码：

*, *:before, *:after
        {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        body
        {
            padding-top: 10%;
            text-align: center;
            overflow-x: hidden;
        }
        
        .btn-edge
        {
            position: relative;
            display: inline-block;
            padding: 1rem 2rem;
            font-family: ‘Titillium Web‘ , sans-serif;
            font-weight: 700;
            text-decoration: none;
            font-size: 3rem;
            color: #333;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));
            background-image: -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333);
            background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
            background-repeat: no-repeat;
            -webkit-background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;
            background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;
            background-position: 0 0, 100% 0, 0 100%, 100% 100%;
            -webkit-box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);
            box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);
            -webkit-transition: background-size 1s .4s, -webkit-box-shadow .4s, color .4s;
            transition: background-size 1s .4s, box-shadow .4s, color .4s;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        .btn-edge:hover
        {
            color: tomato;
            -webkit-background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;
            background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;
            -webkit-box-shadow: inset 0 0 0 5px tomato;
            box-shadow: inset 0 0 0 5px tomato;
            -webkit-transition: background-size 1s, -webkit-box-shadow .4s .6s, color .4s .6s;
            transition: background-size 1s, box-shadow .4s .6s, color .4s .6s;
        }