武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：這個(gè)CSS教程將教你如何使用CSS創(chuàng)造一個(gè)漂亮的動(dòng)態(tài)按鈕 ，所謂動(dòng)態(tài)，指的是默認(rèn)狀態(tài)和聚焦?fàn)顟B(tài)時(shí)背景按鈕圖片不一樣.

這個(gè)CSS教程將教你如何使用CSS創(chuàng)造一個(gè)漂亮的動(dòng)態(tài)按鈕 ，所謂動(dòng)態(tài)，指的是默認(rèn)狀態(tài)和聚焦?fàn)顟B(tài)時(shí)背景按鈕圖片不一樣，讓我們看一下這是怎么完成的:

滑動(dòng)門(mén)

因?yàn)槲覀兿Ｍ覀兊陌粹o是靈活的，我們將要作出的背景圖像，可以文本自動(dòng)改變大小。對(duì)于這一點(diǎn)，我們就用心愛(ài)的滑動(dòng)門(mén)技術(shù);兩個(gè)互補(bǔ)圖片所創(chuàng)造出來(lái)的幻覺(jué)，一個(gè)默認(rèn)的，一個(gè)點(diǎn)擊時(shí)出現(xiàn)的。

我們的按鈕，將是一個(gè)基本的標(biāo)簽嵌套<a>和<span> ，然后給每一個(gè)不同的層指定不同的背景圖像。下面是HTML代碼：

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

接著，我們需要的是兩張清晰的背景圖片，分別使用在默認(rèn)和聚焦?fàn)顟B(tài)下面：

我們將用這兩張圖片在CSS下面達(dá)到按鈕的變幻效果，而不需要使用任何Javascript。背景圖片應(yīng)該設(shè)置一個(gè)合理的高度和寬度。比如這里，我們?cè)O(shè)定寬為300px,高為24px。

下面是分別是和的背景圖片。
SPAN

樣式化按鈕

最后，我們需要一個(gè)CSS對(duì)按鈕進(jìn)行樣式化 ，使這一切都聯(lián)系在一起。因?yàn)槲覀円诖诉^(guò)程中，要對(duì)span和a元素增加到浮動(dòng)屬性，所以，我們對(duì)整下樣式進(jìn)行一個(gè)清除浮動(dòng)：

.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; }

我們現(xiàn)在已經(jīng)有了一個(gè)漂亮的按鈕，但他還沒(méi)有達(dá)到聚焦時(shí)所需要的轉(zhuǎn)換效果，所以，我們還需要加入：

OK，大功告成。但需要注意的是，光靠上面的方法，不能正常運(yùn)行于IE瀏覽器下面，所以，要讓他在IE上也能工作，你需要在a標(biāo)簽里使用到:

<a href=”#” onclick=”this.blur();” class=”button”> … </a>

翻譯的不是太流暢，早知道的話用自己的話解釋了。如果上面的看不明白，你可以點(diǎn)擊這里查看英文原文教程：How to make sexy buttons with CSS。