一款css实现的鼠标经过按钮的特效


Posted in HTML / CSS onSeptember 11, 2014

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

一款css实现的鼠标经过按钮的特效 

源码下载

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

html代码:

复制代码
代码如下:

<body>
<a target="_blank" class="btn-edge" href=https://3water.com>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;
}
HTML / CSS 相关文章推荐
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 #HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 #HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 #HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 #HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 #HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 #HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 #HTML / CSS
You might like
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
pygame实现简易飞机大战
2018/09/11 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
北京大学自荐信范文
2014/01/28 职场文书
销售业务员岗位职责
2014/01/29 职场文书
政府个人对照检查材料
2014/08/28 职场文书
走群众路线学习笔记
2014/11/06 职场文书