利用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+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
浅谈js原生拖放
2016/11/21 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
pow在python中的含义及用法
2019/07/11 Python
python处理大日志文件
2019/07/23 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
pygame实现弹球游戏
2020/04/14 Python
Python eval函数介绍及用法
2020/11/09 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
新闻传媒系求职信范文
2014/04/19 职场文书
开学随笔
2015/08/15 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
如何做好员工培训计划?
2019/07/09 职场文书