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

在线预览   源码下载

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

html代码：

<body>

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

</body>

css代码：

*, *:before, *:after

        {

            margin:;

            padding:;

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

            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实现的鼠标经过按钮特效的更多相关文章

  1. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  2. CSS3制作的一款按钮特效

    /*.btn { width:230px; height:70px; font-size:70px; font-weight:bold; overflow:hidden; font: "He ...

  3. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  4. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  5. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  6. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  7. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  8. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

随机推荐

  1. cocos2d-x 旅程開始--（实现单击与长按）

    小菜鸟一枚,学习cocos2d-x已经有一段时间了,感觉进度非常慢那,CSDN也再次拾了起来.近期自己还在学习做小游戏,跟着前辈做了<忍者打怪物>的小游戏,又学习了瓦片游戏<吃西瓜& ...

  2. 架构-LAMP特级学习(网站大访问量解决方案)

    网站运营要面对的四个问题总结: 1.大访问量(主用负载均衡技术) 2.大存储量 3.访问速度 4.服务器监控 一.大访问量解决方案 超级计算机 = 负载均衡 + 集群 0.反向代理(Nginx等实现) ...

  3. 老毛桃pe装机工具备份系统

    电脑故障可以说是难以避免的,误操作或者修改了哪个设置系统就莫名其妙崩溃了.这在日常使用当中并不鲜见,许多用户就会寻求备份系统方法.有没有好的一键备份系统教程可以参考呢?在本篇教程中,就容我跟大家讲讲怎 ...

  4. HDUOJ-----2399GPA

    GPA Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. Java使用Selenium几个例子

    零.姿势 Selenium分为两个版本:Selenium RC和Selenium Webdriver.现在用Selenium Webdriver比较多. Selenium是一套工具,而不仅仅是一个操纵 ...

  6. Http Analyzer Std V3.3.1.140 汉化补丁

    http://www.cnblogs.com/nicch/archive/2008/08/30/ha_httpanalyzerstdv3.html Http Analyzer Std V3.3.1.1 ...

  7. PowerDesigner 表模型图展示列信息

    今天突然发现表模型不展示列信息了,只显示一个名称,如下图:     虽让点击表模型能看到,但我想让他本身就显示,pd默认就是会显示的,今天不知怎么了,网上找这方面的设置很难找,所以我记录下设置方法(我 ...

  8. Android 应用开发者必看的 9 个 Tips

    去年,Android应用数量已经超过iOS成为全球最大的生态系统,不过在这多大百万的应用中,有些应用的下载量很大,赚的盆满钵满:另外一些应用就石沉大海.无人问津了. 拥有多年程序开发经验,最近在开发A ...

  9. Android HTTP通讯

    这里有一个非常棒的http通讯的总结,我看了以后茅塞顿开. 先贴代码: 01 public class Activity1 extends Activity { 02   03     private ...

  10. android适配器Adapter

    一.什么是适配器,适配器有什么用? 适配器是AdapterView视图(如ListView - 列表视图控件.Gallery - 缩略图浏览器控件.GridView - 网格控件.Spinner - ...