一款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的新特性介绍
Oct 31 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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 验证码实例代码
2010/06/01 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
Prototype Selector对象学习
2009/07/23 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
python验证码识别实例代码
2018/02/03 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python restful框架接口开发实现
2020/04/13 Python
Python之Sklearn使用入门教程
2021/02/19 Python
基本款天堂:Everlane
2017/05/13 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
可口可乐广告词
2014/03/20 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
感恩寄语大全
2014/04/11 职场文书
代理人委托书
2014/08/01 职场文书
小学新教师个人总结
2015/02/05 职场文书
2015年学生管理工作总结
2015/05/26 职场文书