這一次，我們正在創(chuàng)造一個(gè)有用的設(shè)置與對(duì)CSS3的多重背景和動(dòng)畫(huà)的力量動(dòng)畫(huà)按鈕。通過(guò)此按鈕包，您可以很容易地變成一個(gè)動(dòng)畫(huà)按鈕，在您的網(wǎng)頁(yè)上的任何鏈接只是指定一個(gè)類名。沒(méi)有必要JavaScript。四色主題和三個(gè)大小也可通過(guò)分配額外的類名。
要打開(kāi)網(wǎng)頁(yè)上的常規(guī)鏈接成一個(gè)奇特的動(dòng)畫(huà)CSS3的按鈕，你只需要到指定的按鈕類和支持的顏色之一。請(qǐng)參閱下面的一些例子：


有四種顏色類 – 藍(lán)色，綠色，橙色和灰色。其余的類，你看到分配給上面的鏈接，是可選的。您可以選擇從規(guī)模小，中，大，一類 – 圓潤(rùn)，它創(chuàng)建了一個(gè)按鈕更加圓潤(rùn)的版本。
效果演示
推薦使用 Chrome、Firefox等標(biāo)準(zhǔn)瀏覽器查看效果，就是IE 9，也有不兼容的地方。

所有動(dòng)畫(huà)按鈕的CSS代碼駐留在buttons.css。這使得很容易下降到現(xiàn)有的項(xiàng)目，并使用它。
請(qǐng)注意，整個(gè)的下面的代碼，我定義了兩個(gè)版本在一些地方的同一財(cái)產(chǎn)。這與瀏覽器處理CSS定義的方式。他們逐一解析規(guī)則，并將其應(yīng)用，忽略了他們不明白的。這樣我們就可以有一個(gè)理解所有的規(guī)則，這是普通版，一個(gè)CSS3的啟用，將舊的忽視。

我們需要做的第一件事是定義按鈕類。這是按鈕的骨干，因?yàn)樗m用于定位，字體和背景樣式。
首先是與字體相關(guān)的樣式，在這之后如下顯示屬性。它被設(shè)置為inline – block的，這使得它能夠坐在其周圍的文本（如內(nèi)聯(lián)元素）的同一行，但也像一個(gè)方面的填充和利潤(rùn)率塊。
在某一時(shí)刻，你會(huì)看到每個(gè)按鈕有四個(gè)背景圖像應(yīng)用到它。雖然這聽(tīng)起來(lái)很嚇人，只有一個(gè)文件，實(shí)際上是要求從服務(wù)器。前兩個(gè)背景，左下角和右上角部分泡沫圖像，你可以看到下面的插圖，和其他兩個(gè)是純CSS的梯度。

正如我上面提到的的，泡沫的背景是顯示為兩個(gè)單獨(dú)的圖像，背景位置屬性的偏移。使用CSS3的過(guò)渡屬性，我們定義動(dòng)畫(huà)，在這兩個(gè)版本的背景圖片幻燈片的頂部或底部恭恭敬敬，你看到懸停按鈕時(shí)產(chǎn)生泡沫效應(yīng)。

每種顏色的類定義了獨(dú)特的一套獨(dú)特的屬性 – 按鈕的文本標(biāo)簽的顏色，文字陰影和背景圖像。注意，我們使用的背景屬性按鈕添加多個(gè)圖像。他們是分層的頂部，首先出現(xiàn)在上面定義的。
只有Mozilla和Webkit瀏覽器目前支持CSS的梯度，但與完全不同的語(yǔ)法。其余的瀏覽器將顯示回退的背景顏色。您可能已經(jīng)注意到，我們沒(méi)有包括一個(gè)免費(fèi)版本的漸變規(guī)則的前綴。這是由于梯度不是一個(gè)CSS規(guī)范尚未正式的一部分的事實(shí)，并沒(méi)有首選語(yǔ)法協(xié)議。

在上面的片段中，你可以看到，我們定義在它上面的線性漸變和徑向之一。為了使?jié)u變交融，更順利的WebKit和Mozilla的語(yǔ)法，我們定義，這使得外完全透明的漸變顏色的RGBA徑向之一。
有了這個(gè)，我們的CSS3動(dòng)畫(huà)泡沫按鈕完成！
總結(jié)
這些按鈕是完全基于CSS和整合是非常簡(jiǎn)單 – 只是下降的按鈕文件夾在您的項(xiàng)目中的某處。通過(guò)修改CSS文件，您可以創(chuàng)建自己的顏色和形狀。