简洁风格按钮及其CSS 3实现方法
dribbble.com是一个全球优秀设计师聚集的地方，我经常去上面看看大师们的优秀作品。
今天我又看到一个很好看的按钮。
[[65930]]
设计师用一个图层实现了按钮，这个按钮有5个效果：
0. 本身是一个纯色填充图层。
[[65931]]
1. 描边效果。
[[65932]]
2. 高光效果（即PSD中的“内阴影”效果）。为什么能用内阴影做高光呢？因为设计者用了纯白的阴影（不透明度65%）。
[[65933]]
3. 投影效果（即PSD中的“投影”效果）。向下的一像素的阴影，随不起眼，但如果想显出立体感，却至关重要。
[[65934]]
4. 本影效果（即PSD中的“斜面和浮雕”效果）。这一效果给按钮下方添加了1像素的黑色斜面（不透明度15%），制造出按钮的本影。
[[65935]]
5. 高光效果（即PSD中的“渐变叠加”效果）。至此，浏览者很容易有“光源从屏幕上方打在按钮上”的感觉。
[[65936]]
好了，然后加上文字。
[[65937]]
为了让文字有下凹的效果，给文字上方加上1像素的阴影。
[[65938]]
Well Done ! （附上PSD文件）
但是
如果想把这个按钮运用到网页，却很麻烦（不使用CSS 3的话，此按钮的长度很难自适应，除非切图，而且文字的阴影也无法实现，除非用图片代替图片），这就是为什么我们前端开发人员憎恨IE浏览器。
下面说说CSS 3 不使用图片就能实现上面按钮的方法。
这么复杂的光影效果，纯写代码的话，效率太慢了，我使用了在线的CSS 3 Button Generator 工具（建议使用Chrome或Firefox打开）。
步骤：
1. 高光层（即图中的BACKGROUND），设置初始颜色START COLOR为589dfd（为什么取这个颜色？其实你可以自己随意去个蓝色，也可以用取色工具从PSD中取色），勾选50%处颜色设置为488bf7，设置结束颜色END COLOR为3a7af2。
2. 边框（即图中的BORDER），设置宽度WIDTH为1，半径RADIUS为5，其他随意。
3. 投影（即图中的DROP SHADOW），设置颜色COLOR为纯黑，不透明度OPACITY为0.2，x轴便宜0像素，y轴偏移1像素（即向下），扩散大小SIZE为0。
4. 高光（即图中的INNER SHADOW），参数为纯白、0.7、0、1和0。
5.文字阴影（即图中的TEXT SHADOW1和TEXT SHADOW2），参数如图。
做完这些设置，右边就出现了对应的代码了，是不是很方便：
***的效果（附上完整代码）：
[[65939]]
参考：
5 Simple Tricks To Bring Light and Shadow Into Your Designs 译文见《5种在设计中应用光线和阴影的简单技法》
『简单』的按钮
原文链接：http://www.cnblogs.com/frankfang/archive/2012/04/09/2438618.html
【编辑推荐】
- 超酷HTML 5和CSS3实现登录及注册功能表单
- 8个非常有用的HTML 5工具你值得拥有
- 6个优秀的HTML 5/CSS3演示PPT框架推荐
- 解决跨平台问题的***密钥就是HTML 5?
- HTML 5开发：地理位置定位指南