首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 793
收藏 0 赞 0 分享

　　今天给大家分享一款纯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-spacing: 1px;   
  10.         }   
  11.            
  12.         body div   
  13.         {   
  14.             padding: 60px 0;   
  15.             text-align: center;   
  16.             height: 80px;   
  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.             display: inline-block;   
  33.             margin: 10px;   
  34.         }   
  35.            
  36.         .btn   
  37.         {   
  38.             position: relative;   
  39.             width: 160px;   
  40.             padding: 1.2rem 3rem;   
  41.             border: 1px solid #0AA944;   
  42.             font-size: 15px;   
  43.             text-decoration: none;   
  44.             color: #f9f9f9;   
  45.             font-family: "Tablet Gothic" , sans-serif;   
  46.             text-transform: uppercase;   
  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.             border: 2px solid #0AA944;   
  60.         }   
  61.            
  62.         .btn span   
  63.         {   
  64.             position: relative;   
  65.             top: 2px;   
  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.             position: absolute;   
  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.             border: 1px solid rgba(0,0,0,1);   
  92.         }   
  93.            
  94.         .white .btn:hover   
  95.         {   
  96.             background: rgba(0,0,0, .02);   
  97.             border: 2px 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实现的动画按钮的全部代码，　谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22