CSS 部屬經驗-按鈕樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 用 <a></a> 元素來作按鈕
   
2. 利用原有樣式建立延伸樣式
3. 套用在 <input> 的樣式
   

用 <a></a> 元素來作按鈕
連結元素的優點救是 IE6 有支援 hover 偽類，所以使用連結元素用在按鈕上可以用簡單的 CSS 做出點選效果。

當然在 CSS2 上面還有很多樣式上的選擇器，對於美工或使用者介面都有很方便的 CSS 設定，不用為了一點小東西去寫 JavaScript，總結就是 IE6 趕快消失吧！


利用原有樣式建立延伸樣式



在上面的三個按鈕樣式中可以發現只有底圖上的差異，所以在樣式上的規劃可以利用延伸複寫的方式去建立樣式。

首先我先看看這三個按鈕的 HTML 結構：

<a class="Button">
  <span>按鈕文字</span>
</a>

<a class="Button AddButton">
  <span>按鈕文字</span>
</a>

<a class="Button TagButton">
  <span>按鈕文字</span>
</a>

可以發現在 class 上的套用上是有層級的，藉由樣式複寫的方式去延伸原有的樣式。


現在我們來看看 CSS 的設定：

/* 按鈕樣式 */
a.Button {
    /*針對 Mozilla 系列瀏覽器的 inline-block*/
    display: -moz-inline-box;
    
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: #163551 0 -1px 1px;

    height: 23px;
    background: #163551 url(button_right.png) no-repeat right top;
    font-size: 11px;
    padding: 0 3px 0 0;
}
a.Button strong,
a.Button span{
    /*針對 Mozilla 系列瀏覽器的 inline-block*/
    display: -moz-inline-box;
    
    display: inline-block;
    vertical-align: top;

    height: 19px;
    padding: 2px 5px 2px 8px;
    background: #16517d url(button_left.png) no-repeat left top;
    line-height: 19px;
}


/* 按鈕的 hover 效果設定，變換底圖定位及文字顏色 */
a.Button:hover,
a.Button:hover {
    background-position: right bottom;
    color: #fff;
    text-decoration: none;
}
a.Button:hover span,
a.Button:hover strong {
    background-position: left bottom;
    color: #fff;
    text-decoration: none;
}


/* 延伸的按鈕樣式 (AddButton)*/
a.AddButton span,
a.AddButton strong {
    padding-left:25px;
    color:#003366;
    background: #2a2a2a url(button_add_left.png) no-repeat left top;
}

基礎樣式所用到的圖片:

botton_left.png


button_right.png


接著是延伸樣式所用到的圖片：

button_add_left.png


如果還要延伸其他樣式只要改改顏色或圖示就可以了。
上面的 CSS 有用到在 CSS 部屬經驗-樣式命名 提到的限制樣式對象的使用方式，這樣的選擇器設定只能讓樣式套用在連結元素上，這樣的好處是讓樣式與元素有一個關連性。

套用在 <input/> 的樣式
已經為連結元素建立美美的按鈕了，總不能讓 <input/> 這樣醜醜的見人吧！
CSS 樣式：

input.Button {
    background: #9b9b9b url(button_bg.png) left top repeat-x;
    border: 1px solid #ccc;
    border-color: #999 #858585 #666 #858585;
    color: #fff;
    cursor: pointer;
    cursor:hand;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    padding: 0 4px;
    text-decoration: none;
    text-shadow: #9b9b9b 0 -1px 1px;
    vertical-align: middle;
    vertical-align: baseline;
    
    /*各瀏覽器的圓角設定，這裡捨棄對 IE6 的支援*/    
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
}

所用到的圖片:

button_bg.png


這裡我也使用相同的 class 名稱，但在限制樣式對象的作用下這兩個樣式是不會互相衝突的。

參考頁面：
Last.fm
Wacanai.com