我记得在老早的BLOG有谈到过按钮的制作。但是随着时间的推移，有些东西是可以做的精致一些的。

那么就让我们来看看，这个按钮是由哪些东西构成的：

1.主体

在现在的网页设计中，大多数设计师会选择一个简单的过渡色。当然如果你有时间，用心的话，也可以像我这样，用一些颜色，去绘制一个色彩艳丽的主体。

从上图可以明显看出，这是一个相对平面的玩意儿，缺少立体感。so

2. 水晶，玻璃等具有的反光

中间相对与周围更亮些的反光，是为了增加按钮本身的具有的弧度。这样看上去是不是有点样子了？

哈哈，还还早呢！

3. 高亮

高亮是增加按钮本身的厚度，这个细小的地方是非常值得注意的。细微的差别，决定你的东西高别人那么一点点噢！

注意：如果你打算让这个按钮 着地。我的意思是说，最后会给它一个阴影，让它看似在一个地面上。那么下边是不需要加高光的。而如果你是让它悬停在空中，那么上下都需要加上这条高光线。

4. 泛光

泛光我认为是可选的效果，不过就目前网页设计的趋势，大家可以试着给点。这难道就是所谓的朦胧美？OMG，扯远了！

5. 底部反光

记住，你在做一个硬质的，带透明的，类玻璃，水晶这种的按钮。它背后可能有光线穿透。

底部的反光即可以进一步增加按钮的厚度和质感，也可以令它更加通透。

6.外框内发光的处理

这个效果也是加强厚度的可选效果。从上图来看，不是那么的明显。但，我确实加上了它，不是吗！

7.阴影和闪光

阴影是为了让它落地。我前面提到了，如果是悬空的话，根据按钮悬空的高度，将要调节阴影的透明度和大小，甚至去掉阴影。

闪光？oh，这是一个下三烂的手法！但是，有时候，它也会有吸引用户眼球和点睛的作用。设计师来决定吧。

好，加上一个背景：

搞定！

最后。按钮的本身有很多种材质的选择。金属的，木质的，塑料的等等等等，就像3D软件里的材质。所以多多观察，区分它们在不同光线下的区别，是决定你做出的东西是否高质量的重要因素。并且，在网页中，设计师可以扩大这样的效果！