今天要为各网友再带来一款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. centos 6.4 调整home和root分区大小

    调整过程中可以随时查看硬盘分区情况,命令: lsblk df -h 压缩home分区到5G: [root@fscp-dev /]# df -h 文件系统 容量 已用 可用 已用%% 挂载点 /dev/ ...

  2. CentOS 中文乱码

    同事刚装的一台CentOS服务器,SSH登录乱码: 猜测应该是安装时选择的是简体中文,因为发现/etc/sysconfig/i18n文件里面是zh_CN. LANG="zh_CN.UTF-8 ...

  3. Drupal的$messages是怎么显示的？

    Drupal的默认主题bartik会在页面顶部显示系统信息,例如警告.状态等.这个过程是如何实现的? 首先,在bartik目录下找到page.tpl.php,这是bartik主题的页面显示模板.其中有 ...

  4. 深入理解SpringBoot配置

    一.application.properties的位置 1.当前目录的 "/config"的子目录下 2.当前目录下 3.classpath根目录的"/config&qu ...

  5. EditPlus集成Java编译和运行命令组建轻量级Java SE开发工具

    http://www.gogogogo.me/development/EditPlus-Java.html

  6. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  7. NuGet学习笔记(1) 初识NuGet及快速安装使用[转]

    来自:http://www.cnblogs.com/lzrabbit/archive/2012/05/01/2477607.html 关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学 ...

  8. 正确关闭Redis

    1.首先关闭单机版 我的单机版 是放在redis文件夹下面的 首先你要启动你的单机版redis 直接shutdown quit 退出去 ps aux|grep redis  查看运行的redis 关闭 ...

  9. C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型：prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数

    C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...

  10. OAF_OAF Framework状态分析（概念）

    20150706 Created By BaoXinjian