纯css3实现的动画按钮的实例教程


Posted in HTML / CSS onNovember 17, 2014

今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图:

纯css3实现的动画按钮的实例教程

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="black">  
  2.             <a href="#" class="btn"><span>Become A Member</span> <i></i> </a><a href="#"  
  3.                 class="btn"><span>Support Us</span> <i></i> </a><a href="#" class="btn"><span>  
  4.                     Going Down</span> <i class="down"></i> </a><a href="#" class="btn"><span>Sign   
  5.                         Up</span> <i class="up"></i> </a>  
  6.         </div>  
  7.         <div class="white">  
  8.   
  9.             <a href="#" class="btn"><span>Become A Member</span> <i></i> </a><a href="#"  
  10.                 class="btn"><span>Support Us</span> <i></i> </a><a href="#" class="btn"><span>  
  11.                     Going Down</span> <i class="down"></i> </a><a href="#" class="btn"><span>Sign   
  12.                         Up</span> <i class="up"></i> </a>  
  13.         </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. body   
  2.         {   
  3.         }   
  4.            
  5.         h1   
  6.         {   
  7.             font-family"Abril Titling" , Georgia, serif;   
  8.             color#f9f9f9;   
  9.             letter-spacing1px;   
  10.         }   
  11.            
  12.         body div   
  13.         {   
  14.             padding60px 0;   
  15.             text-aligncenter;   
  16.             height80px;   
  17.             margin-top: 0;   
  18.         }   
  19.            
  20.         .black  
  21.         {   
  22.             background#262D28;   
  23.         }   
  24.            
  25.         .white  
  26.         {   
  27.             background#f9f9f9;   
  28.         }   
  29.            
  30.         a   
  31.         {   
  32.             displayinline-block;   
  33.             margin10px;   
  34.         }   
  35.            
  36.         .btn   
  37.         {   
  38.             positionrelative;   
  39.             width160px;   
  40.             padding: 1.2rem 3rem;   
  41.             border1px solid #0AA944;   
  42.             font-size15px;   
  43.             text-decorationnone;   
  44.             color#f9f9f9;   
  45.             font-family"Tablet Gothic" , sans-serif;   
  46.             text-transformuppercase;   
  47.             font-weight: 300;   
  48.             letter-spacing: 1.5px;   
  49.             -webkit-transition: all .2s ease-out;   
  50.             -moz-transition: all .2s ease-out;   
  51.             -ms-transition: all .2s ease-out;   
  52.             -o-transition: all .2s ease-out;   
  53.             transition: all .2s ease-out;   
  54.         }   
  55.            
  56.         .white .btn   
  57.         {   
  58.             color#262D28;   
  59.             border2px solid #0AA944;   
  60.         }   
  61.            
  62.         .btn span   
  63.         {   
  64.             positionrelative;   
  65.             top2px;   
  66.             left: 0;   
  67.             -webkit-transition: all .3s ease-out;   
  68.             -moz-transition: all .3s ease-out;   
  69.             -ms-transition: all .3s ease-out;   
  70.             -o-transition: all .3s ease-out;   
  71.             transition: all .3s ease-out;   
  72.         }   
  73.            
  74.         .btn i   
  75.         {   
  76.             opacity: 0;   
  77.             positionabsolute;   
  78.             margin-top: -21px;   
  79.             top: 2.5rem;   
  80.             left: 120%;   
  81.             -webkit-transition: all .3s ease-out;   
  82.             -moz-transition: all .3s ease-out;   
  83.             -ms-transition: all .3s ease-out;   
  84.             -o-transition: all .3s ease-out;   
  85.             transition: all .3s ease-out;   
  86.         }   
  87.            
  88.         .btn:hover   
  89.         {   
  90.             background: rgba(255,255,255, .9);   
  91.             border1px solid rgba(0,0,0,1);   
  92.         }   
  93.            
  94.         .white .btn:hover   
  95.         {   
  96.             background: rgba(0,0,0, .02);   
  97.             border2px solid rgba(0,0,0,1);   
  98.         }   
  99.            
  100.         .btn:hover span   
  101.         {   
  102.             color#333;   
  103.             left: -20px;   
  104.         }   
  105.            
  106.         a.btn:hover i   
  107.         {   
  108.             opacity: 1;   
  109.             left: 80%;   
  110.             color#333;   
  111.             -webkit-transform: scale(1.2);   
  112.         }   
  113.            
  114.         a.btn:hover .up   
  115.         {   
  116.             -webkit-transform: rotate(270deg);   
  117.         }   
  118.            
  119.         a.btn:hover .down   
  120.         {   
  121.             -webkit-transform: rotate(90deg);   
  122.         }  

 以上就是今天给大家分享一款纯css3实现的动画按钮的全部代码, 谢谢阅读,希望能帮到大家,请继续关注三水点靠木,我们会努力分享更多优秀的文章。

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 #HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 #HTML / CSS
css3实现超炫风车特效
Nov 12 #HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 #HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 #HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 #HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 #HTML / CSS
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
如何用Python合并lmdb文件
2018/07/02 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python实现整数的二进制循环移位
2019/03/08 Python
python deque模块简单使用代码实例
2020/03/12 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
幼儿教师寄语集锦
2014/04/03 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书