CSS3 的按鈕怎麼快速實現樣式？

01-16

2013-1-7更新：

2012-12-12 日，Adobe 發布了 Photoshop 13.1 （CS 6.1）版本，更新了一些與時俱進的功能，比如：

Retina Display，CSS 導出功能……

不過目前來說還沒有 css3ps 這個插件完善，當然還是有亮點滴：

可以批量導出 CSS，比如選中整個圖層組，然後就能導出其中每個圖層的css代碼。
導出的 CSS class 名稱=圖層名稱，比如一個圖層叫 icon，導出的 CSS 就是 .icon{……}。

至此，PS 和 FW 的基情越來越好了。

或許更多人熟知的是 Photoshop，但是同為 Adobe 公司的產品，Fireworks（以下簡稱 fw）才是專門針對網頁設計的，所以在 fw CS6 中加入了更多 CSS3 的特性，這裡就有漸變按鈕的快速轉換為 CSS，一圖勝千言：

生成樣式如下：

/* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,127,0) 0%,rgb(255,185,115) 100%);
/* safari v4.0+ and by Chrome v3.0+ */

background-image:-webkit-gradient(linear,50% 0%,50% 104%,color-stop(0, rgb(255,127,0)),color-stop(1, rgb(255,185,115)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(255,127,0) 0%,rgb(255,185,115) 100%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(255,127,0) 0%,rgb(255,185,115) 100%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(255,127,0) 0%,rgb(255,185,115) 100%);
background-image:linear-gradient(-90deg,rgb(255,127,0) 0%,rgb(255,185,115) 100%);
width:157px;
height:49px;

border-color:rgb(172,172,157);
border-width:1px;
/* Firefox v1.0+ */
-moz-border-radius:7px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:7px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:7px;
border-style:solid;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff7f00,endColorstr=#ffffb973,GradientType=0)";

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff7f00,endColorstr=#ffffb973,GradientType=0);

如果用 photoshop 的話@金釗立的答案很棒，我也去試試 css3ps 這個插件。下載地址是：http://css3ps.com/Download/說說 css3ps 這個插件目前存在的問題：

生成的樣式地址：http://css3.ps/?=559C0663-9802-0B18-1DD5-0B42502B95CE

樣式是在線生成的，點擊按鈕後打開一個在線頁面，每次生成需要等待20秒；
沒有輸出 IE 的漸變濾鏡；
投影（box-shadow）的處理有些問題。
例如例子中的投影應該是：
但是生成後是這樣的：
生成代碼的內陰影是
box-shadow: -1px 0 5px rgba(155,41,0,.75), inset 0 -1px rgba(105,8,8,.75);

和 PS 裡面的視覺效果是不一樣的了，我們來分析一下原因：
在 PS 中這個1px 的內陰影是從 border 外緣開始計算的，而瀏覽器中是從 border 內緣開始計算的，這樣的差異性導致瀏覽器渲染出來和 PS （視覺稿）渲染就有差異了，所以這就是自動化工具的弊端。
我們把內陰影的距離調為2 就可以看到差異了：
所以這裡的內陰影是：box-shadow: -1px 0 5px rgba(155,41,0,.75), inset 0 0 0 rgba(105,8,8,.75);即可，內陰影都為0 了即可省略為：box-shadow: -1px 0 5px rgba(155,41,0,.75);
大家可以用調試工具試試。
用心回答，自己也會學到很多！與人分享，於己快樂。