用纯CSS3绘制晶莹剔透的水晶按钮

      说到质感很强的水晶按钮，相信有5年以上网龄的朋友都不陌生，因为在扁平化风格普及之前，这类按钮在软件，广告，网页设计里面都太流行了。

　　那么问题来了，现在我们研究水晶按钮是不是有点过时了呢？其实不然，质感和扁平并不冲突。相反，搭配得当，可以让它们互补余缺，相得益彰。不信来看看下图的扁平化水晶按钮。

　　对于熟练的美工来说，用photoshop等绘图软件制作这些按钮绝对是轻而易举的事。css3出来之后，这不再是设计师的专利，开发者也可以参与其中了。然而这有什么卵用呢？想想，如果想要鼠标移过的时候切换状态，Photoshop一般就只能实现两个状态的直接切换，但CSS3就不一样了，两个状态之间还可以实现动画过渡。再者，CSS3改起来方便，不用每次导出，而且文件空间也节省了，何乐而不为？

　　本教程我们就来学习如何用CSS3绘制这款水晶按钮。我们会以质感较强的那款为例，因为质感强的都做出来了，还用担心扁平化的版本无法实现吗？

　　这种按钮的结构其实不复杂，一共就两层渐变+一个标签。下层的渐变似乎稍复杂，但仔细观察就会发现，也就多了一条比较粗的描边而已。

　　下面我们先来编写基础的HTML代码。考虑到有的朋友觉得伪元素不好理解，小编这次直接用HTML元素来搭建整个结构。

　　button的主要作用是构建边框和美化字体，aqua用于构建下层的反光渐变，而glare则是水晶的高光部分。

　　这里最简单的部分莫过于描边了，设置下div的边框颜色即可。然后它是个圆角矩形，我们也设置下border-radius（注意要兼容不同的浏览器）。

       代码如下

　　.button {

　　width:90px;

　　height:24px;

　　border-radius:16px;

　　-webkit-border-radius:16px;

　　-moz-border-radius:16px;

　　-o-border-radius:16px;

　　border:2px solid #ccc;

　　position:relative;

　　}

　　由于内层的高光需要和文字重叠，因此高光层需要使用绝对定位，所以我们把父级设置为相对定位，让内层元素在绝对定位的时候以button的左上角作为参考点。

　　运行效果如下图所示

　　字和边框之间有点挤，我们调一下内边距来解决这个问题

　　.button{

　　/*其它样式代码省略*/

　　padding:5px 16px 3px;

　　}

　　再次运行，效果如下图所示

　　接下来我们美化标签文字。从上面的效果图可见，这类按钮都喜欢用白色标签，并且用一个投影来加强层次感。同时，我们换个没那么单薄的字体，然后加粗。最后，按钮标签还是居中对齐比较好。

　　综上所述，要追加的CSS代码如下

　　.button{

　　/*其它样式代码省略*/

　　font-family:微软雅黑;

　　font-weight:800;

　　color:#fff;

　　text-shadow:rgba(10,10,10,0.5) 1px 2px 2px;

　　text-align:center;

　　vertical-align:middle;

　　}

　　简单讲讲text-shadow，rgba(10,10,10,0.5)代表不透明度等于50%的深灰色阴影，r=g=b=10（满值255），后面的1px 2px代表阴影在水平和垂直方向上的偏移量，最后的2px代表阴影大小。

　　运行效果如下图所示

　　是时候为背景添加渐变了。不过button类里已经包含了太多样式，为便于区分，我们用跟这个div一起引用的另一个样式——aqua来设置背景相关的属性。

       代码如下

　　这段代码用gradient定义了一个深蓝到浅蓝，自上而下的渐变，有效区域为0%~90%（也就是说90%到100%的部分为纯色），并且用4个前缀来兼容不同的浏览器。

　　运行效果如下图所示

　　现在感觉边框有点单调了，我们不妨给4条边框设置不同的颜色。

       代码如下

　　.aqua{

　　/*其它样式代码省略*/

　　border-color:#8ba2c1  #5890bf  #4f93ca  #768fa5;

　　}

　　4个颜色用英文空格进行分隔，依次为上，右，下，左，即从上开始顺时针排过来。

　　运行效果如下图所示

　　现在有点感觉了，我们把高光加上。

　　高光层要跟文字重叠，因此需要绝对定位。至于渐变，用的就是白色的半透明渐变，让高光既有较清晰的分界线来凸显光感，又可以通过渐变加强立体效果。

　　另外高光要跟文字重叠，所以必须使用绝对定位。

       具体代码如下

　　至于圆角，渐变等参数设置，方法跟背景相类似，此处不再赘述。

　　而坐标宽高等数值则需要通过多次的测试微调出最佳的结果，所以没什么科学依据，考验的就是设计师的耐心和功底。

　　再次运行，效果如下图所示

　　光感有了，但是整个按钮在圆角上表现得比较圆，但是渐变的立体感仍然较弱，感觉不太协调。所以最后，我们继续沿用前面的一个做法，通过阴影加强整体的层次感。而应用阴影的对象自然就是下层了。

       具体代码如下

　　.aqua {

　　/*其它样式代码省略*/

　　-webkit-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;

　　-moz-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;

　　-o-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;

　　box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;

　　}

　　阴影用法跟text-shadow相类似，此处不再详细讲解，唯独要注意的是该属性需要用不同前缀兼容不同的浏览器。

　　至此，最经典的水晶按钮制作完毕。

      一直有关注课课家的朋友大概会发现这次用的阴影跟往常不太一样，不是灰色半透明，而以蓝色半透明代之，这跟水晶的透明特性有关，光线照到水晶按钮上的时候，并不会把光线给全部吸收，而是会透出一大部分的蓝光，所以阴影用黑色或者灰色将会比较难表现出水晶的透明感。

　　质感强烈的元素在页面或者软件界面中会特别显眼，在少数地方使用它可以更好地突出重点。然而由于立体感太强，颜色过于鲜艳，所以大量运用容易导致界面的整体效果看起来非常俗气。近年网络流行扁平化风格的设计以后，这样的问题得到了很有效的缓解。但这并不代表我们不能再使用水晶效果，比如本教程开头展示的扁平化水晶按钮，就是质感和扁平化完美结合的典范。在学习完本教程之后，小编相信大家都能用CSS3把扁平版的水晶按钮给轻松绘制出来。还等什么，赶快行动吧！