2009-07-24

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

0 回應: