英文原文：How to make sexy buttons with css
作者：Alex

? 這是一個教程，作者Alex一步步地叫我們怎樣使用css來制作一個迷人的按鈕，看后覺得挺好，很想大家都看看，翻譯的可能稍有不妥，望諒解……

? 這個教程將要教會你使用css來制作非常好看的按鈕（包括不同的點擊狀態）。動態的按鈕節省了您大量的花在畫圖的時間。

? 其實你也可以制作出來這樣漂亮的按鈕的，只需要跟著我們的教程就可以了：

• 第一步：滑動門

? 我們想使按鈕可以靈活擴展，所以我們必須得讓背景圖片隨著按鈕上面的文字的擴展而擴展，所以，我們就必須要使用到可愛的滑動門技術：兩張圖片合作給人一種可以擴展的單張圖片的假象：　

? 我們的按鈕是一個<a>標簽內嵌一個<span>標簽組成，a標簽和span標簽各自含有一張不同的背景圖片，我們的html代碼如下:

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

? 好像看似沒有什么特別的，是嗎？接下來，我們需要為我們按鈕的按下前后狀態設計不同的好看的樣式，下面這個是我自己想的：

???????????? 普通狀態下???????????????????????????? 按下狀態

? 我們將會把按鈕的這兩種狀態的背景圖片合成在?一張圖片上。如果要切換普通狀態和按下兩種狀態，我們就只需要將這張背景圖片的豎直方向的位置變化一下就可以了。這種以css為主的方法可使我們可以不是用javascript腳本兒完成按鈕背景圖片的切換。讓我們吧這兩張圖片合并起來并作為我們的滑動門圖片，我們把承裝按鈕文本的那個圖片的寬度設置為300px（應該足夠了吧^_^），圖片的高度設置為24px。

???????????????? SPAN　　　　　　　　　　　　　　　　　　　　A

???

• 第二步：為按鈕加上樣式

? 最后，我們需要使用css將這些想法鏈接起來。我們可能需要把許多這樣的按鈕水平排成一行，所以我使用了浮動。

.clear { /* generic container (i.e. div) for floating buttons */overflow: hidden;width: 100%; }a.button {background: transparent url('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; /* sliding doors padding */text-decoration: none; }a.button span {background: transparent url('bg_button_span.gif') no-repeat;display: block;line-height: 14px;padding: 5px 0 5px 18px; }

? 注意：一定要保證span標簽的豎直方向的padding（5px+5px）再加上line-height（14px）的總和是我們的button的高度24px。使用不同的padding意味著我們的按鈕會有不同的高度。

? 這樣我們一個漂亮的按鈕就誕生了，但是當我們去點擊它的時候我們并不能夠獲得很好的視覺上的反饋，交互性不好。所以，讓我們在位這個按鈕補上最后一筆：

a.button:active {background-position: bottom right;color: #000;outline: none; /* hide dotted outline in Firefox */ }a.button:active span {background-position: bottom left;padding: 6px 0 4px 18px; /* push text down 1px */ }

• 第三步：一個對ie的不同的處理方法

? 真是令人掃興，當你在ie瀏覽器里面點擊這個按鈕的時候，你會發現點擊釋放之后按鈕不會再回到原來的狀態。為了避免這個ie里面的問題，我們需要在a標簽里面加上一點點的javascript腳本。

<a class="button" href="#" οnclick="this.blur();"> … </a>

?? 假如你想使用這個按鈕來提交表單，那你可以為這個a標簽的click事件添加更多的方法。

• 歡迎反饋

? 真心希望你能夠喜歡這個教程并且迫不及待想要自己親手制作一個這樣的漂亮按鈕。如果你有什么想法和建議，一定要讓我知道，你可以給我發郵件info@oscaralexander.com。當然，你如果學會了并且把它運用到實際，我非常高興。

轉載于:https://www.cnblogs.com/xiaoheng1991/archive/2010/10/05/1844421.html

總結

以上是生活随笔為你收集整理的【翻译】怎样使用css制作迷人的button的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。