没有css3之前，我们需要在PS中创建水晶按钮。有了css3，我们可以很容易生成水晶按钮。尽管CSS3Gradient还未得到大多数浏览器的支持，但各主流浏览器已经在自己的内核中支持css3Gradient(WebKitNightly(current)、Safari4inclleSafari、Chrome4、Firefox3.6)。

按钮的html如下：

1. <divclass="buttonaqua">
2.<divclass="glare"></div>
3.ButtonLabel
4.</div>
在css中，分别定义buttton、aqua、glare的css属性，.button定义按钮外观，.aqua实现水晶效果，.glare实现辉光效果。

01..button{
02.width:120px;
03.height:24px;
04. padding:5px16px3px;
05. -webkit-border-radius:16px;
06. -moz-border-radius:16px;
07. border:2pxsolid#ccc;
08. position:relative;
09./*Label*/
10. font-family:LucidaSans,Helvetica,sans-serif;
11. font-weight:800;
12. color:#fff;
13. text-shadow:rgba(10,10,10,0.5)1px2px2px;
14. text-align:center;
15. vertical-align:middle;
16. white-space:nowrap;
17. text-overflow:ellipsis;
18. overflow:hidden;
19.}
实现水晶效果的css代码：

01..aqua{
02.background-color:rgba(60,132,198,0.8);
03.border-top-color:#8ba2c1;
04.border-right-color:#5890bf;
05.border-bottom-color:#4f93ca;
06.border-left-color:#768fa5;
07.-webkit-box-shadow:rgba(66,140,240,0.5)0px10px16px;
08.-moz-box-shadow:rgba(66,140,240,0.5)0px10px16px;
09.background-image:-webkit-gradient(linear,0%0%,0%90%,from(rgba(28,91,155,0.8)),to(rgba(108,191,255,.9)));
10./*forFF3.6*/
11.background-image:-moz-linear-gradient(rgba(28,91,155,0.8)0%,rgba(108,191,255,.9)90%);
12.}
上面的代码中，-webkit-box-shadow或-moz-box-shadow生成按钮投影。background-image生成渐变背景，类似PS中的“渐变叠加”。

实现辉光效果的css代码：

01. .button.glare{
02.position:absolute;
03:0;
04.left:5px;
05.-webkit-border-radius:8px;
06.-moz-border-radius:8px;
07.height:1px;
08.width:142px;
09.padding:8px0;
10.background-color:rgba(255,255,255,0.25);
11.background-image:-webkit-gradient(linear,0%0%,0%95%,from(rgba(255,255,255,0.7)),to(rgba(255,255,255,0)));
12.}