利用css3实现的简单的鼠标悬停按钮


Posted in HTML / CSS onNovember 04, 2014

今天给大家分享一款基于css3的简单的鼠标悬停按钮。这款悬停按钮鼠标经过前边框是间断的。当鼠标经过的时候边框间隔消失。效果图如下:

利用css3实现的简单的鼠标悬停按钮

实现的代码。

html代码:

复制代码
代码如下:
<div class="container">
<p>
Single gradient border</p>
<a href="#" class="btn">Click Me!</a> <a href="#" class="btn">Very long link text here</a>
</div>
<div class="container">
<p>
Pseudo elements at a fixed size. Nasty 1px drop on hover</p>
<a href="#" class="btn2">Click Me!</a> <a href="#" class="btn2">Very long link text
here</a>
</div>
<div class="container">
<p>
Multiple borders using pseudo elements with gradient borders</p>
<a href="#" class="btn3">Click Me!</a> <a href="#" class="btn3">Very long link text
here</a>
</div>
<h1>
<a href="#" class="btn3">A Huge Link</a></h1>

css3代码:

复制代码
代码如下:
body
{
font-family: "Courier New" , "Inconsolata" , monospace;
font-size: 18px;
line-height: 26px;
background: #333;
color: #fff;
}
h1
{
font-weight: 100;
font-size: 80px;
line-height: 90px;
text-align: center;
}
.container
{
width: 800px;
margin: 50px auto;
text-align: center;
}
.btnCommon
{
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px 16px;
margin: 0 10px;
border: 1px solid #fff;
letter-spacing: 1px;
}
.btnCommon:hover
{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.btn
{
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px 16px;
margin: 0 10px;
border: 1px solid #fff;
letter-spacing: 1px;
border-image: linear-gradient(to right, #ffffff 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #ffffff 85%) 1;
transition: all .2s;
}
.btn:hover
{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.btn:hover
{
transition: all .2s;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #fff;
}
.btn2
{
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px 16px;
margin: 0 10px;
border: 1px solid #fff;
letter-spacing: 1px;
border: none;
height: 40px;
line-height: 40px;
position: relative;
padding: 0;
margin: 0 25px;
}
.btn2:hover
{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.btn2:before, .btn2:after
{
width: 15px;
border: 1px solid #fff;
position: absolute;
content: "";
height: 40px;
top: -1px;
}
.btn2:before
{
left: -16px;
border-right: none;
}
.btn2:after
{
right: -16px;
border-left: none;
}
.btn2:hover, .btn2:hover:before, .btn2:hover:after
{
transition: all .2s;
background: rgba(255, 255, 255, 0.2);
border-color: pink;
}
.btn2:hover
{
border: 1px solid pink;
border-width: 1px 0 1px 0;
}
.btn3
{
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px 16px;
margin: 0 10px;
border: 1px solid #fff;
letter-spacing: 1px;
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
transition: all .2s;
}
.btn3:hover
{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.btn3:before, .btn3:after
{
display: inline-block;
width: 100%;
height: 100%;
content: "";
position: absolute;
left: -1px;
top: -1px;
border-width: 1px;
transition: all .2s;
}
.btn3:before
{
border-image: linear-gradient(to right, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;
}
.btn3:after
{
border-image: linear-gradient(to left, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;
}
.btn3:hover
{
transition: all .2s;
background: rgba(255, 255, 255, 0.2);
}
.btn3:hover:before, .btn3:hover:after
{
border: 1px solid rgba(0, 0, 0, 0);
transition: all .2s;
}
HTML / CSS 相关文章推荐
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 #HTML / CSS
一款纯css3实现的响应式导航
Oct 31 #HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 #HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 #HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
You might like
php的控制语句
2006/10/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php开发工具有哪五款
2015/11/09 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python实现Linux中的du命令
2017/06/12 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python使用RNN实现文本分类
2018/05/24 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
用Python解数独的方法示例
2019/10/24 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
公司出纳岗位职责
2015/03/31 职场文书
离婚答辩状范文
2015/05/22 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript