利用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样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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 危险函数解释 分析
2009/04/22 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP框架性能测试报告
2016/05/08 PHP
心扬JS分页函数代码
2010/09/10 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python实现划词翻译
2020/04/23 Python
Python 的 Socket 编程
2015/03/24 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python操作json的方法实例分析
2018/12/06 Python
python 用下标截取字符串的实例
2018/12/25 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python实现126邮箱发送邮件
2020/05/20 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
中专生自荐信
2013/10/12 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
付款委托书范本
2014/10/05 职场文书
入党介绍人意见范文
2015/06/01 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js