CSS3的transitions和animations屬性都可以用來實現(xiàn)風(fēng)格漸變的效果。本文即收集了一些非常不錯的利用它們來制作Web按鈕的教程，希望你會喜歡。

1.Typestudy:AnallCSSbutton

地址：

http://blog.typekit.com/2011/02/10/type-study-an-all-css-button

通過本文介紹的使用box-shadow、text-shadow、border-radius以及CSSgradients（漸變）方法，我們可以設(shè)計出一個非常漂亮的界面組件而無需使用圖片。

2.RadioactiveButtons

地址：

http://www.zurb.com/playground/radioactive-buttons

使用CSSanimation設(shè)計漂亮優(yōu)雅的按鈕，帶來跳動的體驗哦。

3.AnimatedButtonswithCSS3

地址：

http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3

這個教程指導(dǎo)了如何在按鈕上設(shè)計一些動態(tài)鏈接元素，包括多種風(fēng)格與懸停效果，非常有創(chuàng)意。

4.CSS3AnimatedBubbleButtons

地址：

http://tutorialzine.com/2010/10/css3-animated-bubble-buttons

在本文你將學(xué)會如何借助CSS3中的多背景功能來設(shè)計一系列相似按鈕。

5.CrossBrowserPureCSS3ButtonDemo（跨瀏覽器的純CSS3按鈕實現(xiàn)）

地址：

http://www.midwinter-

dg.com/permalink-cross-browser-pure-css3-button-demo-2011-07-21.html

已經(jīng)在Mca下的Safari5、Firefox5、Chrome12和Opera11.5中測試過，IE的話就不勉其難了，或者你可以試試。

6.CSSOnlyButton

地址：

http://www.binarymoon.co.uk/2010/06/css-button-redux

此教程只利用CSS和HTML來設(shè)計完善的動畫按鈕，不使用任何JS及圖片。