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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
浅析两列自适应布局的3种思路
May 03 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
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
php生成随机密码的几种方法
2011/01/17 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
六道php面试题附答案
2014/06/05 面试题
大堂副理的岗位职责范文
2014/02/17 职场文书
毕业论文评语大全
2014/04/29 职场文书
取保候审保证书
2014/04/30 职场文书
个人自我剖析材料
2014/09/30 职场文书
出纳工作检讨书
2014/10/18 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
欠条格式范本
2015/07/03 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS