首先来看看效果图:

CSS3实现圆角立体按钮的简单实例(无需图片)

HTML 代码就这么简单:

XML/HTML代码
  1. <a href="#" class="button green">button</a>  
  2.   
  3. <a href="#" class="button blue">button</a>  
  4. <a href="#" class="button gray">button</a>  

如果没有 CSS ,那么上面的 HTML 执行起来是这样的:

CSS3实现圆角立体按钮的简单实例(无需图片)

开始 CSS3 的编写:

CSS代码
  1. .button {  
  2.     displayinline-block;  
  3.     positionrelative;  
  4.     margin10px;  
  5.     padding: 0 20px;  
  6.     text-aligncenter;  
  7.     text-decorationnone;  
  8.     fontbold 12px/25px Arialsans-serif;  
  9. }  

一些不同颜色的按钮样式:

CSS代码
  1. .green {  
  2.     color#3e5706;  
  3.     background#a5cd4e;  
  4. }  
  5.   
  6. /* Blue Color */  
  7.   
  8. .blue {  
  9.     color#19667d;  
  10.     background#70c9e3;  
  11. }  
  12.   
  13. /* Gray Color */  
  14.   
  15. .gray {  
  16.     color#515151;  
  17.     background#d3d3d3;  
  18. }  

到这一步后按钮看起来是这样的:

CSS3实现圆角立体按钮的简单实例(无需图片)

接下来开始用 CSS 处理圆角:

CSS代码
  1. .button {  
  2.     displayinline-block;  
  3.     positionrelative;  
  4.     margin10px;  
  5.     padding: 0 20px;  
  6.     text-aligncenter;  
  7.     text-decorationnone;  
  8.     fontbold 12px/25px Arialsans-serif;  
  9.   
  10.     text-shadow1px 1px 1px rgba(255,255,255, .22);  
  11.   
  12.     -webkit-border-radius: 30px;  
  13.     -moz-border-radius: 30px;  
  14.     border-radius: 30px;  
  15.   
  16.     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);  
  17.     -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);  
  18.     box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);  
  19.   
  20.     -webkit-transition: all 0.15s ease;  
  21.     -moz-transition: all 0.15s ease;  
  22.     -o-transition: all 0.15s ease;  
  23.     -ms-transition: all 0.15s ease;  
  24.     transition: all 0.15s ease;  
  25. }  

现在的按钮圆润多了,看看:

CSS3实现圆角立体按钮的简单实例(无需图片)

还不够啊,没有立体效果,再完善完善:

CSS代码
  1. /* Green Color */  
  2.   
  3. .green {  
  4.     color#3e5706;  
  5.   
  6.     background#a5cd4e/* Old browsers */  
  7.     background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */  
  8.     background: -webkit-gradient(linear, left topleft bottomcolor-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */  
  9.     background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */  
  10.     background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */  
  11.     background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */  
  12.     background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */  
  13. }  
  14.   
  15. /* Blue Color */  
  16.   
  17. .blue {  
  18.     color#19667d;  
  19.   
  20.     background#70c9e3/* Old browsers */  
  21.     background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */  
  22.     background: -webkit-gradient(linear, left topleft bottomcolor-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */  
  23.     background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */  
  24.     background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */  
  25.     background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */  
  26.     background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */  
  27. }  
  28.   
  29. /* Gray Color */  
  30.   
  31. .gray {  
  32.     color#515151;  
  33.   
  34.     background#d3d3d3/* Old browsers */  
  35.     background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */  
  36.     background: -webkit-gradient(linear, left topleft bottomcolor-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */  
  37.     background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */  
  38.     background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */  
  39.     background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */  
  40.     background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */  
  41. }  

现在爽了,漂亮了,你喜欢这样的按钮吗?

CSS3实现圆角立体按钮的简单实例(无需图片)

为了让按钮更大一点,我们增加了个 big 样式:

XML/HTML代码
  1. <a href="#" class="button big green">sign in <span>One minute</span></a>  
  2. <a href="#" class="button big blue">sign in <span>One minute</span></a>  
  3.   
  4. <a href="#" class="button big gray">sign in <span>One minute</span></a>  
CSS代码
  1. /* Big Button Style */  
  2.   
  3. .big {  
  4.     padding: 0 40px;  
  5.     padding-top10px;  
  6.     height45px;  
  7.     text-transformuppercase;  
  8.     fontbold 20px/22px Arialsans-serif;  
  9. }  
  10.   
  11. .big span {  
  12.     displayblock;  
  13.     text-transformnone;  
  14.     fontitalic normal 12px/18px Georgia, sans-serif;  
  15.     text-shadow1px 1px 1px rgba(255,255,255, .12);  
  16. }  

大按钮的效果:

CSS3实现圆角立体按钮的简单实例(无需图片)

我们还需要处理下当鼠标移到按钮上方时显示不同的效果:

CSS代码
  1. .button:hover {  
  2.     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);  
  3.     -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);  
  4.     box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);  
  5. }  
  6. .button:active {  
  7.     -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);  
  8.     -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);  
  9.     box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);  
  10. }  

效果如下:

CSS3实现圆角立体按钮的简单实例(无需图片)

好了,完美的CSS3按钮解决方案。

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.jizhuomi.com/software/359.html
2014年9月22日
作者:鸡啄米 分类:软件开发 浏览: 评论:1