码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-10 23:43:51      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   for   2014   

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

 

bubuko.com,布布扣

在线预览   源码下载

 

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

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;
        }

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/6366

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

标签:style   blog   http   color   io   os   ar   for   2014   

原文地址:http://www.cnblogs.com/liaohuolin/p/3965265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!