一款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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 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版(2)
2006/10/09 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php实现的顺序线性表示例
2019/05/04 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
党员干部承诺书范文
2014/03/25 职场文书
《春笋》教学反思
2014/04/15 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android