您现在的位置是：网站首页> 编程资料编程资料

纯css3实现的动画按钮的实例教程CSS3实现带网站Logo小图标的各大网站分享按钮源码jQuery/CSS3实现超酷的分享按钮源码纯css3实现的鼠标悬停动画按钮一款基于css3的动画按钮代码教程五款漂亮的纯CSS3动画按钮的实例教程纯CSS3实现的带Tooltip提示框的按钮特效源码CSS3 实现一组质感细腻丝滑的按钮

2021-09-06 715人已围观

简介 这篇文章主要为大家介绍了一款动画按钮，只利用css3就可以完成，第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，需要的朋友可以参考下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="black">  
  2.             <a href="#" class="btn"><span>Become A Memberspan> <i>→i> a><a href="#"  
  3.                 class="btn"><span>Support Usspan> <i>→i> a><a href="#" class="btn"><span>  
  4.                     Going Downspan> <i class="down">→i> a><a href="#" class="btn"><span>Sign   
  5.                         Upspan> <i class="up">→i> a>  
  6.         div>  
  7.         <div class="white">  
  8.   
  9.             <a href="#" class="btn"><span>Become A Memberspan> <i>→i> a><a href="#"  
  10.                 class="btn"><span>Support Usspan> <i>→i> a><a href="#" class="btn"><span>  
  11.                     Going Downspan> <i class="down">→i> a><a href="#" class="btn"><span>Sign   
  12.                         Upspan> <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.    

    上一篇：纯css3实现的竖形无限级导航css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    下一篇：2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网