本節書摘來自華章社群《響應式web設計：html5和css3實踐指南》一書中的第1章，第1.8節基于css3按鈕的進度條，作者（美） benjamin lagrone，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視
1.8 基于css3按鈕的進度條
和其他網站一樣，你的網站也需要去迎合那些急性子的使用者。如果你的網站有一個可送出的表單，訪客可能會不耐煩地多次單擊“送出”按鈕，因為你的頁面加載新内容不夠快。這可能會導緻一個問題，就是表單多次送出同樣的資料。
1.8.1 準備工作
為了防止這種行為，可以添加一些簡單的視覺提示，告訴使用者背景正在處理，請保持耐心。如果效果比較華麗，甚至可以給他們匆忙的生活增添點陽光。這個方法不需要任何圖像，隻需要使用css建立一個漂亮的漸變式送出按鈕。本節内容很長，你可以先停下來喝杯咖啡。
1.8.2 實作方式
可以先建立一個包含幾個文本框和一個送出按鈕的表單。然後，為了使表單真的很酷，為文本框使用html5占位符屬性。即使有占位符，這個表單還是相當單調。
注意，internet explorer 9還不支援此方法。
可以通過css給該按鈕再添加一個hover效果。使用該屬性，當滑鼠指針移動到按鈕上時，看起來就像它被按下一樣。下面的css将給按鈕添加黑色邊框。
使用css3盒陰影及jquery可以實作一個簡單的動畫，在單擊submit按鈕後有一個跳動的光暈環繞着該按鈕。使用jquery建立一個事件監聽器來監聽按鈕的click事件。在click事件中作用于該表單按鈕元素的一系列類将發生變化。腳本将動态添加partial-fade類到按鈕元素中。
不要忘記添加jquery源碼連結到head标簽中：
哇！為了給該按鈕實作這樣一個小細節我們真是大費周章。但是這樣的細節真正有助于制作一個漂亮的網站。這正是我喜歡用來給訪客驚喜的細節之一。
1.8.3 工作原理
css3背景漸變可以使一個漂亮的按鈕在不同浏覽器上外觀一緻。漸變是複雜的，尤其是目前每個浏覽器要求各自的css代碼實作漸變。可以通過手動添加百分比和顔色控制漸變轉效點（breakpoint）。當事件被觸發時，添加盒陰影、邊框及jquery使按鈕産生有趣的效果。