一款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将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 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下的权限算法的实现
2007/04/28 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
PHP实现简单的计算器
2020/08/28 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
Javascript注入技巧
2007/06/22 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
建筑节能汇报材料
2014/08/22 职场文书
2015年人事科工作总结
2015/04/28 职场文书
雷锋电影观后感
2015/06/10 职场文书
服务行业标语口号
2015/12/26 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书