首先来看看效果图：

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.     display: inline-block;  
  3.     position: relative;  
  4.     margin: 10px;  
  5.     padding: 0 20px;  
  6.     text-align: center;  
  7.     text-decoration: none;  
  8.     font: bold 12px/25px Arial, sans-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.     display: inline-block;  
  3.     position: relative;  
  4.     margin: 10px;  
  5.     padding: 0 20px;  
  6.     text-align: center;  
  7.     text-decoration: none;  
  8.     font: bold 12px/25px Arial, sans-serif;  
  9.   
  10.     text-shadow: 1px 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 top, left bottom, color-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 top, left bottom, color-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 top, left bottom, color-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-top: 10px;  
  6.     height: 45px;  
  7.     text-transform: uppercase;  
  8.     font: bold 20px/22px Arial, sans-serif;  
  9. }  
  10.   
  11. .big span {  
  12.     display: block;  
  13.     text-transform: none;  
  14.     font: italic normal 12px/18px Georgia, sans-serif;  
  15.     text-shadow: 1px 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