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中新增的样式使用示例附效果图
Aug 19 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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
在字符串中把网址改成超级链接
2006/10/09 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js转html实体的方法
2016/09/27 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python生成器用法实例详解
2019/11/22 Python
Python pandas库中的isnull()详解
2019/12/26 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
护理目标管理责任书
2014/07/25 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
预备党员入党感言
2015/08/01 职场文书
Python基础详解之描述符
2021/04/28 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis