使用CSS3实现按钮特效

HTML代码
定位问题
分析动画
css代码

最近在慕课网上看到了一个按钮特效，觉得挺好看的，记录一下。

简单分析一下就是鼠标移入的时候有四条线分别从四个方向移入，横向的两条线宽度和位置发生变化，纵向的两条线高度和位置发生变化。

HTML代码

<a href="#" class="button"><span class="line line-top"></span><span class="line line-right"></span><span class="line line-bottom"></span><span class="line line-left"></span>GET STARTED</a>

定位问题

a元素作为父元素，定位为relative，让span元素相对于它定位，span元素定位为absolute。a元素是内联元素，我需要给它设置宽和高，所以需要改变它的display属性。然后给span元素加上过渡属性。

a{display: inline-block;width: 300px;height: 80px;line-height: 80px;color: #fff;border: 2px solid #fff;position: relative;}.line{position: absolute;transition:all .2s ease-in;background-color: #fff;}

分析动画

以.line-top为例，可以看到，这条线从左边飞入，它的高度等于a元素的border值，宽度由0过渡到a元素的宽度值，初始位置可以根据情况写，我定义的初始位置是从left:-100%开始，最终位置到left:-2px。这里不能到left:0，这个原因其实用图比较好解释。我特意用红色显示span元素，应该可以很清楚的看到，线条没有完全重合，因为a元素的border影响了它实际的宽度和高度，所以对于.line-top这条线，它的位置应该是top:-2px,left:-2px。

.line-top{width: 0;height: 2px;left: -100%;top:-2px;}.button:hover .line-top{width: 300px;left: -2px;}

其他三条线跟它是类似的，可以自己研究写出来，我贴出完整的css样式代码：

css代码

.button{display: inline-block;width: 300px;height: 80px;line-height: 80px;color: #73A238;border: 2px solid #73A238;position: relative;transition:all .2s ease-in;}
.button:hover{text-decoration: none;border: 2px solid #fff;color: #fff;
}.line{position: absolute;transition:all .2s ease-in;background-color: #fff;}.line-top{width: 0;height: 2px;left: -100%;top:-2px;}.button:hover .line-top{width: 300px;left: -2px;}.line-bottom{width: 0;height: 2px;right: -100%;bottom:-2px;}.button:hover .line-bottom{width: 300px;right: -2px;}.line-right{width: 2px;height: 0;top: -100%;right:-2px;}.button:hover .line-right{height: 80px;top: -2px;}.line-left{width: 2px;height: 0;bottom: -100%;left:-2px;}.button:hover .line-left{height: 80px;bottom: -2px;}

使用CSS3实现按钮特效相关推荐

前端开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
纯CSS3实现牛奶般剔透的3D按钮特效
今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...
html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
css3悬停按钮发光遮罩动画js特效
下载地址一款简单美观的css3悬停按钮发光遮罩动画特效,紫色线框按钮发光和扫光动画特效. dd:
CSS3白色质感3D按钮特效源码
这是一款css3白色质感3D按钮特效.该按钮使用svg做为图标,通过css3代码,打造出非常炫酷的3d按钮效果. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mf75 ...
html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
css3 javascript 实现菜单按钮特效
一个菜单按钮特效案例,简单的实现了动态效果. 代码效果预览地址: http://code.w3ctech.com/detail/2504 <div class="bar" i ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
html按钮样式_一组强大的CSS3 Material 按钮
插件简介今天我们要给大家带来一组很漂亮的CSS3按钮,按钮的整体风格采用Material设计样式,非常简洁和清新.在这组CSS3按钮中,样式各种各样,有圆形按钮,也有带小图标的按钮,当然颜色也有很多 ...