How to make sexy buttons with CSS

 

原文地址：http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

前言

       本教程將教你如何通過使用CSS建立漂亮的文字按鈕。動態按鈕會節省你很多時間，而且通過花費時間來建立圖形基本上會讓在這一天結束的時候變得更加快樂。在這裡你會得到什麼：

Sliding doors技術

       因為我們想要我們的按鈕變得彎曲，我們就要做到背景映像適應文本的長度。為此，我們會用滑動門技術；用兩張互補的映像來製作成一個看上去單一的並且會延展的映像。

我們的按鈕將是一個<a>標籤嵌套一個<span>標籤組成，每個都包含一個不同的切片映像的背景。HTML代碼是就像這樣的：

<a class ="button"href="#"><span>Bring world peace</span></a>

      沒有什麼超乎尋常的，對嗎？下一步，我們需要為我們的按鈕在正常和按下狀態想出一個清晰的設計。這是我想的：

      我們將讓一個映像有兩種狀態。為了讓切換之間的正常和按下狀態，我們可以背景映像垂直移動，展現出兩種狀態。這個CSS樣式允許我們完成切換而不需要JavaScript。讓我們合并這兩個映像並且運用切片技術將它們切開。映像的一部分，將容納按鈕的文本並且它將被設定為一個合理的300px，高度會設定為24 px。

按鈕樣式

     最後，我們需要一些CSS樣式來把它們拼湊在一起。然而由於我們可能要排幾個按鈕水平，所以我決定把它預設float。

.clear{</p><p> overflow:hidden;</p><p> width:100%;</p><p>}</p><p>a {</p><p> color:#C08;</p><p>}</p><p>a.button {</p><p> background: transparent url('../Images/bg_button_a.gif') no-repeatscroll top right;</p><p> color: #444;</p><p> display: block;</p><p> float: left;</p><p> font: normal 12px arial, sans-serif;</p><p> height: 24px;</p><p> margin-right: 6px;</p><p> padding-right: 18px;</p><p> text-decoration: none;</p><p>}</p><p>a.button span {</p><p> background: transparent url('../Images/bg_button_span.gif') no-repeat;</p><p> display: block;</p><p> line-height: 14px;</p><p> padding: 5px 0 5px 18px;</p><p>}

 

      我們現在有一個漂亮的按鈕，但它並不完全給我們視覺反饋，當它被按下。所以讓我們添加畫龍點睛的樣式：

 a.button:active{</p><p> background-position: bottom right;</p><p> color: #000;</p><p> outline: none;</p><p>}</p><p>a.button:activespan {</p><p> background-position: bottom left;</p><p> padding: 6px 0 4px 18px;</p><p>}

Alldone