今天要为各网友再带来一款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. 按部就班——图解配置IIS5的SSL安全访问（转）

    作者:mikespook 版本:1.0 最后更新:2004-12-22 16:04 按部就班——图解配置IIS5的SSL安全访问... 1 写在前面的... 1 第一步:       准备工作... ...

  2. linux 浏览查看文件more,less,head,tail,cat,tac,od,nl命令使用简介

    参考:linux 基本命令详解 cat,tac,nl,more,less,head,tail,od 命令more,less,head,tail,cat,tac,od,nl等是是使用Linux系统常用的 ...

  3. DirectoryEntry配置IIS7出现ADSI Error：未知错误(0x80005000) [转]

    一.错误情况 环境:win7+iis7.0 DirectoryEntry配置IIS7出现如下错误 或者是 下面一段代码在IIS6.0下运转正常,但IIS7.0下运转会出错: System.Direct ...

  4. Android 中日期对话框的应用

    import java.util.Calendar; import android.widget.DatePicker; import android.app.DatePickerDialog; // ...

  5. malloc的内存分配原理

    0 堆内存的在计算机内存中的形式 根据<The C Programming language>推测得到堆内存,图中的Heap区域即为堆内存块(Heap区域的数目不代表计算机堆内存的真实数目 ...

  6. Python 字典 keys() 方法

    描述 Python 字典 keys() 方法以列表形式(并非直接的列表,若要返回列表值还需调用list函数)返回字典中的所有的键. 语法 keys() 方法语法: D.keys() 参数 无. 返回值 ...

  7. add printer driver error 1802修复说明

    1.重启电脑后 ,将服务"Print Spooler"服务重新启动2.srclient.dll文件拷贝到c盘 windows/system32目录下3.连接好打印机USB接口,重装 ...

  8. 将mysql非分区表转换为分区表（转）

    查看表的分布状况mysql> select count(*) from  justin;+----------+| count(*) |+----------+|  5845246 |+---- ...

  9. 赶集mysql军规

    总是在灾难发生后,才想起容灾的重要性.总是在吃过亏后,才记得曾经有人提醒过. 一,核心军规 不在数据库做计算,cpu计算务必移至业务层 控制单表数据量,单表记录控制在千万级 控制列数量,字段数控制在2 ...

  10. Oracle学习笔记之五sp1，PL/SQL之BULK COLLECT

    Bulk Collect特性可以让我们在PL/SQL中能使用批查询,批查询在某些情况下能显著提高查询效率. BULK COLLECT 子句会批量检索结果,即一次性将结果集绑定到一个集合变量中,并从SQ ...