CSS代碼製作精美按鈕

在這篇文章中，我們將用CSS3代碼製作精美的按鈕。

簡單的HTML代碼

基本的CSS 代碼渲染

CSS3 代碼渲染

CSS3 背景顏色

讓按鈕更大點

經過和點擊效果

 

 

 

第一步：HTML代碼

通過HTML代碼建立簡單的<a> 標籤代碼, 並且為每個標籤添加class： button, big,  blue/green/gray：

12345

<a href="#" class="button big blue">按鈕</a> <a href="#" class="button big green">按鈕</a> <a href="#" class="button big gray">按鈕 </a>

預覽：

 

 

 

 

 

 

 

第二部：基本CSS代碼

首先我們用基本CSS2代碼 通過 .button 添加基本的CSS風格渲染，基本的形狀以及風格。

CSS代碼：

123456789

.button {    display: inline-block;    position: relative;    margin: 10px;    padding: 0 20px;    text-align: center;    text-decoration: none;    font: bold 12px/25px Arial, sans-serif;}

然後我們再根據 blue/green/gray 為每個<a>標籤定義不同的顏色：

1234567891011121314151617181920

/* 綠色  */ .green {    color: #3e5706;    background: #a5cd4e;}  /* 藍色  */  .blue {    color: #19667d;    background: #70c9e3;}  /* 灰色 */  .gray {    color: #515151;    background: #d3d3d3;}

通過button, 和顏色class的基本代碼渲染，按鈕已經出現了雛形。

預覽效果：

 

第三步：CSS3代碼渲染。

通過前兩部的基本代碼，按鈕的基本雛形已經出現了，我們現在利用CSS3代碼，對按鈕進行進階渲染，

添加陰影，圓角效果。

123456789101112131415161718192021222324252627

.button {    display: inline-block;    position: relative;    margin: 10px;    padding: 0 20px;    text-align: center;    text-decoration: none;    font: bold 12px/25px Arial, sans-serif;      text-shadow: 1px 1px 1px rgba(255,255,255, .22);  /* 文字陰影製作效果 */      -webkit-border-radius: 30px;  /* 圓角效果 針對不同瀏覽器  */    -moz-border-radius: 30px;    border-radius: 30px;      -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1