5款好看的纯CSS3动漫按钮的案例实例教程

2021-01-20 08:12 jianzhan

  今日来共享很非常好的CSS3按钮动漫,这款CSS3按钮1共有5种动漫方法,每种全是电脑鼠标滑过动漫方式,尽管这些动漫按钮并不是10分绮丽,可是网编感觉不像别的按钮那样很难拓展,大家能够改动CSS编码随便更改自身喜爱的色调款式。

  让大家1起看来看完成这5中款式动漫按钮的HTML编码和CSS编码吧。以第1个按钮为例,别的按钮的编码大伙儿能够免费下载源码来科学研究,其实不是很难。

  HTML编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="button01">  
  2.       <a href="#">Download</a>  
  3.       <p class="top">click to begin</p>  
  4.       <p class="bottom">1.2MB .zip</p>  
  5. </div>  

  CSS编码:

CSS Code拷贝內容到剪贴板
  1. .button01 {   
  2.   width200px;   
  3.   margin50px auto 20px auto;   
  4. }   
  5.   
  6. .button01 a {   
  7.   displayblock;   
  8.   height50px;   
  9.   width200px;   
  10.   
  11.   /*TYPE*/  
  12.   colorwhite;   
  13.   font17px/50px HelveticaVerdanasans-serif;   
  14.   text-decorationnone;   
  15.   text-aligncenter;   
  16.   text-transformuppercase;   
  17.   
  18.   /*GRADIENT*/     
  19.   background#00b7ea/* Old browsers */  
  20.   background: -moz-linear-gradient(top#00b7ea 0%, #009ec3 100%); /* FF3.6+ */  
  21.   background: -webkit-gradient(linear, left topleft bottombottomcolor-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */  
  22.   background: -webkit-linear-gradient(top#00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */  
  23.   background: -o-linear-gradient(top#00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */  
  24.   background: -ms-linear-gradient(top#00b7ea 0%,#009ec3 100%); /* IE10+ */  
  25.   background: linear-gradient(top#00b7ea 0%,#009ec3 100%); /* W3C */  
  26.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6⑼ */  
  27. }   
  28.   
  29. .button01 a, p {   
  30.     -webkit-border-radius: 10px;   
  31.      -moz-border-radius: 10px;   
  32.           border-radius: 10px;   
  33.   
  34.   -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   
  35.      -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   
  36.           box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   
  37. }   
  38.   
  39. p {   
  40.   background#222;   
  41.   displayblock;   
  42.   height40px;   
  43.   width180px;    
  44.   margin: -50px 0 0 10px;   
  45.   
  46.   /*TYPE*/  
  47.   text-aligncenter;   
  48.   font12px/45px HelveticaVerdanasans-serif;   
  49.   color#fff;   
  50.   
  51.   /*POSITION*/  
  52.   positionabsolute;   
  53.   z-index: ⑴;   
  54.   
  55.   /*TRANSITION*/     
  56.   -webkit-transition: margin 0.5s ease;   
  57.      -moz-transition: margin 0.5s ease;   
  58.        -o-transition: margin 0.5s ease;   
  59.       -ms-transition: margin 0.5s ease;   
  60.           transition: margin 0.5s ease;   
  61. }   
  62.   
  63. /*HOVER*/  
  64. .button01:hover .bottombottom {   
  65.   margin: -10px 0 0 10px;   
  66. }   
  67.   
  68. .button01:hover .top {   
  69.   margin: -80px 0 0 10px;   
  70.   line-height35px;   
  71. }   
  72.   
  73. /*ACTIVE*/  
  74. .button01 a:active {   
  75.       background#00b7ea/* Old browsers */  
  76.       background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */  
  77.       background: -webkit-gradient(linear, left topleft bottombottomcolor-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */  
  78.       background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */  
  79.       background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */  
  80.       background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */  
  81.       background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */  
  82.       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6⑼ */  
  83.   
  84. }   
  85.   
  86. .button01:active .bottombottom {   
  87.   margin: -20px 0 0 10px;   
  88. }   
  89.   
  90. .button01:active .top {   
  91.   margin: -70px 0 0 10px;   
  92. }  

 有关强烈推荐:

  纯css3完成的动漫按钮的案例实例教程

  1款纯css3完成的色调渐变色按钮的编码实例教程

  1款纯css3完成的电脑鼠标历经按钮殊效实例教程

  运用css3完成的简易的电脑鼠标悬停按钮

  纯CSS3发光共享按钮的完成实例教程