这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。

在线预览   源码下载

实现的代码。

html代码：

  1. <!--button01-->
  2. <div class="button01">
  3.       <a href="#">Download</a>
  4.       <p class="top">click to begin</p>
  5.       <p class="bottom">1.2MB .zip</p>
  6.     </div>
  7. <!--button01-->  
  8.  
  9. <!--button--02-->
  10. <div class="button02"><a class="box">My box with glow</a></div>
  11. <!--end button02-->
  12.  
  13. <!--button03-->
  14. <div id="menu">
  15.     <ul>
  16.         <li><a href="#">Home</a><a href="#">See Us</a></li>
  17.         <li><a href="#">About</a><a href="#">Meet Us</a></li>
  18.         <li><a href="#">Contact</a><a href="#">Email Us</a></li>
  19.     </ul>
  20. </div>
  21. <!--end button03-->
  22.  
  23. <!--button04-->
  24. <div id="main">
  25.  
  26. <ul id="navigationMenu">
  27.     <li>
  28.         <a class="home" href="#">
  29.             <span>Home</span>
  30.         </a>
  31.     </li>
  32.  
  33.     <li>
  34.         <a class="about" href="#">
  35.             <span>About</span>
  36.         </a>
  37.     </li>
  38.  
  39.     <li>
  40.          <a class="services" href="#">
  41.             <span>Services</span>
  42.          </a>
  43.     </li>
  44.  
  45.     <li>
  46.         <a class="portfolio" href="#">
  47.             <span>Portfolio</span>
  48.         </a>
  49.     </li>
  50.  
  51.     <li>
  52.         <a class="contact" href="#">
  53.             <span>Contact us</span>
  54.         </a>
  55.     </li>
  56. </ul>
  57.  
  58. </div>
  59. <!---end button04-->
  60.  
  61. <!---button05-->
  62. <div id="container">
  63.     <a href="#nogo" class="button05">Login ►</a>
  64.     <a href="#nogo" class="button05">Register ♥</a>
  65. </div>
  66. <!---end button05-->

css3代码：

  1. * {
  2.     padding:;
  3.     margin:;
  4. }
  5. a{
  6.     transition-duration:0.4s, 0.5s;
  7.     transition-property:background-color, color;
  8.     transition-timing-function:ease, ease;
  9. }
  10. body{font-family:Arial;}
  11.  
  12. /*********************************button 01********************************/
  13. .button01 {
  14.   width: 200px;
  15.   margin: 50px auto 20px auto;
  16. }
  17.  
  18. .button01 a {
  19.   display: block;
  20.   height: 50px;
  21.   width: 200px;
  22.  
  23.   /*TYPE*/
  24.   color: white;
  25.   font: 17px/50px Helvetica, Verdana, sans-serif;
  26.   text-decoration: none;
  27.   text-align: center;
  28.   text-transform: uppercase;
  29.  
  30.   /*GRADIENT*/
  31.   background: #00b7ea; /* Old browsers */
  32.   background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  33.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  34.   background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  35.   background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  36.   background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  37.   background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  38.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
  39. }
  40.  
  41. .button01 a, p {
  42.     -webkit-border-radius: 10px;
  43.      -moz-border-radius: 10px;
  44.           border-radius: 10px;
  45.  
  46.   -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  47.      -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  48.           box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  49. }
  50.  
  51. p {
  52.   background: #222;
  53.   display: block;
  54.   height: 40px;
  55.   width: 180px;
  56.   margin: -50px 0 0 10px;
  57.  
  58.   /*TYPE*/
  59.   text-align: center;
  60.   font: 12px/45px Helvetica, Verdana, sans-serif;
  61.   color: #fff;
  62.  
  63.   /*POSITION*/
  64.   position: absolute;
  65.   z-index: -1;
  66.  
  67.   /*TRANSITION*/
  68.   -webkit-transition: margin 0.5s ease;
  69.      -moz-transition: margin 0.5s ease;
  70.        -o-transition: margin 0.5s ease;
  71.       -ms-transition: margin 0.5s ease;
  72.           transition: margin 0.5s ease;
  73. }
  74.  
  75. /*HOVER*/
  76. .button01:hover .bottom {
  77.   margin: -10px 0 0 10px;
  78. }
  79.  
  80. .button01:hover .top {
  81.   margin: -80px 0 0 10px;
  82.   line-height: 35px;
  83. }
  84.  
  85. /*ACTIVE*/
  86. .button01 a:active {
  87.       background: #00b7ea; /* Old browsers */
  88.       background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
  89.       background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  90.       background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  91.       background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
  92.       background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
  93.       background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
  94.       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
  95.  
  96. }
  97.  
  98. .button01:active .bottom {
  99.   margin: -20px 0 0 10px;
  100. }
  101.  
  102. .button01:active .top {
  103.   margin: -70px 0 0 10px;
  104. }
  105. /*****************************button 01**********************************/
  106. /*****************************button 02*****************************/
  107. div.button02{
  108.  
  109.     color: #333;
  110.     font-size: 12px;
  111.     line-height: 1.64;
  112.     margin:0 auto ;
  113. }
  114. .box {
  115.     background: #1c1c1c;
  116.     color: #0099ff;
  117.     cursor: pointer;
  118.     display: block;
  119.     margin: 40px auto;
  120.     padding: 20px;
  121.     text-align: center;
  122.     width: 150px;
  123.     transition:all 1s ease-out;
  124.     -webkit-transition: -webkit-box-shadow 0.5s ease-out;
  125.     -moz-transition: -moz-box-shadow 0.5s ease-out;
  126.     -o-transition: box-shadow 0.5s ease-out;
  127. }
  128. .box:hover {
  129.     -moz-box-shadow: 0px 0px 15px #0099ff;
  130.     -webkit-box-shadow: 0px 0px 15px #0099ff;
  131.      box-shadow: 0px 0px 15px #0099ff;
  132. }
  133. a:hover {
  134.     color: #0088CC;
  135.     text-decoration: underline;
  136. }
  137. /*********************************end  button02***********************/
  138.  
  139. /*********************************button03***********************************/
  140.  
  141. #menu {
  142.     height: 100px; width: 630px;
  143.     overflow: hidden;
  144.     margin: 40px auto;
  145.     text-align: center;
  146. }
  147.  
  148. #menu ul li {
  149.     float: left;
  150.     margin: 0 5px;
  151.     list-style-type: none;
  152. }
  153.  
  154. /* Menu Link Styles */
  155. #menu ul a {
  156.     display: block;
  157.     background: #e70f23; color: #fff;
  158.     height: 100px; width: 200px;
  159.     font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  160.     text-decoration: none;
  161.  
  162.     -webkit-transition: margin .4s ease-in-out;
  163.     -moz-transition: margin .4s ease-in-out;
  164.     -o-transition: margin .4s ease-in-out;
  165.     -ms-transition: margin .4s ease-in-out;
  166.     transition: margin .4s ease-in-out;
  167. }
  168.  
  169. /* Secondary Link Styles */
  170. #menu ul a:nth-of-type(even) {
  171.     background: #000;
  172.     color: white;
  173. }
  174.  
  175. /* Hover Slide */
  176. #menu ul li:hover :first-child {
  177.     margin-top: -100px;
  178. }
  179. /***********************************end button03***********************************/
  180.  
  181. /***********************************button04***********************************/
  182. #navigationMenu li{
  183.     list-style:none;
  184.     height:39px;
  185.     padding:2px;
  186.     width:40px;
  187. }
  188.  
  189. #navigationMenu span{
  190.     /* Container properties */
  191.     width:;
  192.     left:38px;
  193.     padding:;
  194.     position:absolute;
  195.     overflow:hidden;
  196.  
  197.     /* Text properties */
  198.     font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  199.     font-size:18px;
  200.     font-weight:bold;
  201.     letter-spacing:0.6px;
  202.     white-space:nowrap;
  203.     line-height:39px;
  204.  
  205.     /* CSS3 Transition: */
  206.     -webkit-transition: 0.25s;
  207.     /*-o-transition: 0.25s;*/
  208.  
  209.     /* Future proofing (these do not work yet): */
  210.     -moz-transition: 0.25s;
  211.     transition: 0.25s;
  212. }
  213.  
  214. #navigationMenu a{
  215.     background:#C30;
  216.  
  217.     height:39px;
  218.     width:38px;
  219.     display:block;
  220.     position:relative;
  221. }
  222.  
  223. /* General hover styles */
  224.  
  225. #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  226. #navigationMenu a:hover{
  227.     text-decoration:none;
  228.  
  229.     /* CSS outer glow with the box-shadow property */
  230.     -moz-box-shadow:0 0 5px #9ddff5;
  231.     -webkit-box-shadow:0 0 5px #9ddff5;
  232.     box-shadow:0 0 5px #9ddff5;
  233. }
  234.  
  235. /* Green Button */
  236.  
  237. #navigationMenu .home {}
  238. #navigationMenu .home:hover {    background-position:0 -39px;}
  239. #navigationMenu .home span{
  240.     background-color:#7da315;
  241.     color:#3d4f0c;
  242.     text-shadow:1px 1px 0 #99bf31;
  243. }
  244.  
  245. /* Blue Button */
  246.  
  247. #navigationMenu .about { }
  248. #navigationMenu .about:hover { background-position:-38px -39px;}
  249. #navigationMenu .about span{
  250.     background-color:#1e8bb4;
  251.     color:#223a44;
  252.     text-shadow:1px 1px 0 #44a8d0;
  253. }
  254.  
  255. /* Orange Button */
  256.  
  257. #navigationMenu .services { }
  258. #navigationMenu .services:hover { background-position:-76px -39px;}
  259. #navigationMenu .services span{
  260.     background-color:#c86c1f;
  261.     color:#5a3517;
  262.     text-shadow:1px 1px 0 #d28344;
  263. }
  264.  
  265. /* Yellow Button */
  266.  
  267. #navigationMenu .portfolio {}
  268. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  269. #navigationMenu .portfolio span{
  270.     background-color:#d0a525;
  271.     color:#604e18;
  272.     text-shadow:1px 1px 0 #d8b54b;
  273. }
  274.  
  275. /* Purple Button */
  276.  
  277. #navigationMenu .contact { }
  278. #navigationMenu .contact:hover { background-position:-152px -39px;}
  279. #navigationMenu .contact span{
  280.     background-color:#af1e83;
  281.     color:#460f35;
  282.     text-shadow:1px 1px 0 #d244a6;
  283. }
  284.  
  285. /* The styles below are only needed for the demo page */
  286.  
  287. #main{
  288.     margin:40px auto;
  289.     position:relative;
  290.     width:40px;
  291. }
  292.  
  293. /***********************end button04***************************/
  294.  
  295. /***********************button05*****************************/
  296. #container {
  297.     width: 450px;
  298.     margin:40px auto;
  299. }
  300.  
  301. .button05 {
  302.     position: relative;
  303.     display: inline-block;
  304.  
  305.     min-width: 150px;
  306.     padding: 10px 15px;
  307.     margin: 0px 10px;
  308.  
  309.     background-color: #3E9ED6;
  310.     background-image: -webkit-gradient(
  311.         linear,
  312.         left top,
  313.         left bottom,
  314.         color-stop(0, rgb(112,181,242)),
  315.         color-stop(0.49, rgb(84,164,238)),
  316.         color-stop(0.5, rgb(54,144,240)),
  317.         color-stop(1, rgb(26,97,219))
  318.     );
  319.     background-image: -moz-linear-gradient(
  320.         center top,
  321.         rgb(112,181,242) 0%,
  322.         rgb(84,164,238) 49%,
  323.         rgb(54,144,240) 50%,
  324.         rgb(26,97,219) 100%
  325.     );
  326.  
  327.     color: #fff;
  328.     font-weight: bold;
  329.     font-size: 24px;
  330.     text-decoration: none;
  331.     text-align: center;
  332.     line-height:;
  333.     text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
  334.  
  335.     border: 1px solid;
  336.     border-color: #2f71a3 #265a82 #1e4766 #265a82;
  337.     border-radius: 8px;
  338.     -moz-border-radius: 8px;
  339.     -webkit-border-radius: 8px;
  340.  
  341.     box-shadow:         inset 0px -4px 5px rgba(255,255,255,0.2),
  342.                         inset 0px 1px 5px rgba(255,255,255,0.2),
  343.                         /**/
  344.                         0px 2px 0px #1e4766,
  345.                         0px 4px 0px #1e4766,
  346.                         0px 6px 0px #1e4766,
  347.                         /**/
  348.                         0px 8px 5px rgba(0,0,0,0.5);
  349.  
  350.     -moz-box-shadow:     inset 0px -4px 5px rgba(255,255,255,0.2),
  351.                         inset 0px 1px 5px rgba(255,255,255,0.2),
  352.                         /**/
  353.                         0px 2px 0px #1e4766,
  354.                         0px 4px 0px #1e4766,
  355.                         0px 6px 0px #1e4766,
  356.                         /**/
  357.                         0px 8px 5px rgba(0,0,0,0.5);
  358.  
  359.     -webkit-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
  360.                         inset 0px 1px 5px rgba(255,255,255,0.2),
  361.                         /**/
  362.                         0px 2px 0px #1e4766,
  363.                         0px 4px 0px #1e4766,
  364.                         0px 6px 0px #1e4766,
  365.                         /**/
  366.                         0px 8px 5px rgba(0,0,0,0.5);
  367. }
  368.  
  369. .button05:hover {
  370.     background-color: #8AC5FD;
  371.  
  372.     background-image: -webkit-gradient(
  373.         linear,
  374.         left top,
  375.         left bottom,
  376.         color-stop(0, rgb(134,193,253)),
  377.         color-stop(0.49, rgb(153,213,255)),
  378.         color-stop(0.5, rgb(130,194,253)),
  379.         color-stop(1, rgb(108,170,229))
  380.     );
  381.     background-image: -moz-linear-gradient(
  382.         center top,
  383.         rgb(134,193,253) 0%,
  384.         rgb(153,213,255) 49%,
  385.         rgb(130,194,253) 50%,
  386.         rgb(108,170,229) 100%
  387.     );
  388. }
  389.  
  390. .button05:active {
  391.     top: 4px;
  392.     box-shadow:         inset 0px 4px 5px rgba(255,255,255,0.4),
  393.                         inset 0px -1px 5px rgba(255,255,255,0.2),
  394.                         /**/
  395.                         0px 2px 0px #1e4766,
  396.                         /**/
  397.                         0px 4px 5px rgba(0,0,0,0.5);
  398.  
  399.     -moz-box-shadow:     inset 0px 4px 5px rgba(255,255,255,0.4),
  400.                         inset 0px -1px 5px rgba(255,255,255,0.2),
  401.                         /**/
  402.                         0px 2px 0px #1e4766,
  403.                         /**/
  404.                         0px 4px 5px rgba(0,0,0,0.5);
  405.  
  406.     -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
  407.                         inset 0px -1px 5px rgba(255,255,255,0.2),
  408.                         /**/
  409.                         0px 2px 0px #1e4766,
  410.                         /**/
  411.                         0px 4px 5px rgba(0,0,0,0.5);
  412. }
  413.  
  414. /***********************end button05*****************************/

via:http://www.w2bc.com/Article/11384

5种漂亮的纯CSS3动画按钮特效的更多相关文章

  1. 纯CSS3动画按钮效果

    在线演示 本地下载

  2. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  3. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  4. 纯CSS3动画：一棵跳舞的树

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  5. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  6. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 纯CSS3实现3D特效的iPhone 6动画

    iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示    ...

  9. 最新的css3动画按钮效果

    效果演示     插件下载

随机推荐

  1. java RandomAccessFile类（随机访问文件）

    该类可以实现对同一个文件的读写操作,与其他IO流不同的是可以指定读写指针的脚标(seek),有跳过指定个数字节(skipBytes)操作. 另外该类也可用于断点续传. 简单示例如下: import j ...

  2. 从一个Idea到产品需要经历哪些阶段？

    从一个Idea到产品需要经历哪些阶段? Lkey 07月19日 16:520 现实工作中,不免遇到这样的情况.什么嘛?老板(领导)又有新想法了?又有其他Idea了?心里一阵骂娘xxxxxx.或者产品负 ...

  3. JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...

  4. 使用增强for循环遍历集合的时候操作集合的问题？

    // 遍历一个list public static void printList(List<String> list){ for (String string : list) { list ...

  5. 很轻很强大：轻量级桌面环境比较(转自linuxeden)

    这天你终于下定决心购买了一台流行的 Netbook ,与往常装机一样,直接安装心爱的 Linux 发行版.好不容易安装完成了,却发现平日启动飞快的应用程序在 Netbook 上怎么都跑不快.怎么办呢? ...

  6. HUDOJ-----1394Minimum Inversion Number

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  7. [转]网易云音乐Android版使用的开源组件

    原文链接 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我 ...

  8. POJ 3691 DNA Sequence （AC自动机 + 矩阵 有bug，待修改）

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9889   Accepted: 3712 Desc ...

  9. Oracle 11g的Deferred Segment Creation

    本篇主要介绍Oracle 11g中推出的“延迟段创建”(Deferred Segment Creation)特性,以及当我们使用这种特性时,需要注意的问题. 1)Deferred Segment Cr ...

  10. Unix环境高级编程(十八)高级进程间通信

    本章主要介绍了基于STREAM的管道和UNIX域套接字,这些IPC可以在进程间传送打开文件描述符.服务进程可以使用它们的打开文件描述符与指定的名字相关联,客户进程可以使用这些名字与服务器进程通信. 1 ...