今天要为各网友再带来一款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. Java API 各个包的内容解释

    java.applet 提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类. java.awt 包含用于创建用户界面和绘制图形图像的所有类. java.awt. ...

  2. C#利用反射机制调用dll

    利用反射进行动态加载和调用. Assembly ass=Assembly.LoadFrom(DllPath); //利用dll的路径加载,同时将此程序集所依赖的程序集加载进来,需后辍名.dll Ass ...

  3. 批量修改Java类文件中引入的package包路径

    http://libeey.blogbus.com/logs/101848958.html当复制其他工程中的包到新工程的目录中时,由于包路径不同,出现红叉,下面的类要一个一个修改包路径,类文件太多的话 ...

  4. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  5. Oracle 11g的Deferred Segment Creation

    本篇主要介绍Oracle 11g中推出的“延迟段创建”(Deferred Segment Creation)特性,以及当我们使用这种特性时,需要注意的问题. 1)Deferred Segment Cr ...

  6. vs开发 winform 设置winform 获取管理员权限启动

    因为需要设置为开机项 没有管理员权限对注册表访问失败 C# 以管理员身份运行WinForm程序 转载https://www.bbsmax.com/A/obzbkKrQJE/ 鱼洛 2016-07-29 ...

  7. Python练习笔记——计算个人体重指数

    输入您的身高 体重 性别 计算出你的体重是否标准 gender = input('请输入您的性别(boy or girl):') height = input('请输入您的身高(单位cm):') he ...

  8. Linux内核中锁机制之内存屏障、读写自旋锁及顺序锁

    在上一篇博文中笔者讨论了关于原子操作和自旋锁的相关内容,本篇博文将继续锁机制的讨论,包括内存屏障.读写自旋锁以及顺序锁的相关内容.下面首先讨论内存屏障的相关内容. 三.内存屏障 不知读者是是否记得在笔 ...

  9. SICP 习题 （2.8） 解题总结：区间的减法

    SICP 习题 2.8 须要我们完毕区间运算的减法.区间运算的加法书中已经有了,代码例如以下: (define (add-interval x y) (make-interval (+ (lower- ...

  10. CTPN - 训练

    源码地址:https://github.com/eragonruan/text-detection-ctpn 该地址提供了 CTPN 的 tf 版本的实现,代码文档写得很详细,issue 里面也帮助解 ...