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

<a href=”#” class=”button blue big”>Download</a>
<a href=”#” class=”button blue medium”>Submit</a>
<a href=”#” class=”button small blue rounded”>Submit</a>

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

所有動(dòng)畫按鈕的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)用到它。雖然這聽起來很嚇人，只有一個(gè)文件，實(shí)際上是要求從服務(wù)器。前兩個(gè)背景，左下角和右上角部分泡沫圖像，你可以看到下面的插圖，和其他兩個(gè)是純CSS的梯度。

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

/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url(‘button_bg.png’), url(‘button_bg.png’),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);