首先來看看效果圖:

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.028keji.com/software/359.html
2014年9月22日
作者:雞啄米 分類:軟件開發 瀏覽: 評論:1