利用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一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
详解Vue方法与事件
2017/03/09 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
网络管理员岗位职责
2014/03/17 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
先进班组事迹材料
2014/12/25 职场文书
环卫工人慰问信
2015/02/15 职场文书
试用期自我评价范文
2015/03/10 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
python井字棋游戏实现人机对战
2022/04/28 Python