6种非常炫酷的CSS3按钮边框动画特效


Posted in HTML / CSS onMarch 16, 2016

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。

6种非常炫酷的CSS3按钮边框动画特效

在线预览    源码下载

使用方法 

HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。

XML/HTML Code复制内容到剪贴板
  1. <button class="draw">draw</button>          

CSS样式

在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。

CSS Code复制内容到剪贴板
  1. button {   
  2.   backgroundnone;   
  3.   border: 0;   
  4.   box-sizing: border-box;   
  5.   box-shadow: inset 0 0 0 2px #f45e61;   
  6.   color#f45e61;   
  7.   font-size: inherit;   
  8.   font-weight: 700;   
  9.   margin: 1em;   
  10.   padding: 1em 2em;   
  11.   text-aligncenter;   
  12.   text-transformcapitalize;   
  13.   positionrelative;   
  14.   vertical-alignmiddle;   
  15. }   
  16. button::before, button::after {   
  17.   box-sizing: border-box;   
  18.   content'';   
  19.   positionabsolute;   
  20.   width: 100%;   
  21.   height: 100%;   
  22. }               
  23.   

以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。

本文就为大家介绍到这,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/w2bc/p/4922347.html

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 #HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 #HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
You might like
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python实现flappy bird游戏
2018/12/24 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
python re模块和正则表达式
2021/03/24 Python
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
写给女生的道歉信
2014/01/08 职场文书
部队领导证婚词
2014/01/12 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
新员工入职感言
2014/02/01 职场文书
教师师德反思材料
2014/02/15 职场文书
个性婚礼策划方案
2014/05/17 职场文书
村党支部公开承诺书
2014/05/29 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
活动总结范文
2014/08/30 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS