如何用css製作有趣的按鈕(最新譯文)

滑動門

為了讓我們製作的按鈕具有靈活性，我們必須要讓背景圖片自動適應按鈕的文字的寬度，為此，我們要使用滑動門技術，將兩張背景圖片合并成一張背景圖片。按鈕將使用a標籤和span標籤，他們分別使用背景圖片的不同部分，html代碼是這樣的：

<a class="button" href="#"><span>search</span></a>

沒有什麼超乎尋常的事發生,對嗎？我們需要設計出簡單明了的按鈕，下面是我的想法：

 

每張圖將包含按鈕的兩個狀態，既普通和按下。我們把兩種狀態的圖片交替的垂直排列，這個css技巧可以不用任何javascript指令碼來完成變化，下面我們將使用滑動門技術，為了讓按鈕自適應文字的寬度，我們將圖片做的寬一些，比如300px,高24px：

span　　　　　　　　　　　　　　　　　　　ａ

 

按鈕樣式

最後我們將用css把這一切整合起來：

a.button {
  background: transparent url(''images/bg_button_a.gif'') no-repeat scroll top right;
  color:#444;
  display: block;
  float: left;
  font: normal 12px arial, sans-serif;
  height: 24px;
  margin-right: 6px;
  padding-right: 18px;
  text-decoration: none;
}

a.button span {
  background: transparent url(''images/bg_button_span.gif'') no-repeat;
  display: block;
  line-height: 14px;
  padding: 5px 0 5px 18px;
}