一款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 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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 图片水印类代码
2012/08/27 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
经典c++面试题三
2015/07/08 面试题
shell的种类有哪些
2015/04/15 面试题
辛亥革命观后感
2015/06/02 职场文书
公司员工培训管理制度
2015/08/04 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android