做建站这行七年了，说实话，现在纯代码手写UI的情况越来越少了，大家都喜欢用现成的框架或者插件。但是！每当遇到那种需要极致轻量、加载飞快，还得有点设计感的按钮时，我还是会习惯性地打开编辑器，用CSS3去敲。今天不聊虚的，直接上干货，讲讲怎么用最简单的HTML和CSS，搞出一个那种晶莹剔透、像玻璃一样的“水晶按钮”。
先说个场景，上周有个老客户找我，说他的官网太素了，像个毛坯房。特别是那个“立即咨询”的按钮，灰扑扑的，完全没人点。我一看代码，好家伙，居然还在用图片切图做按钮背景？这也太复古了吧。我当场就给他换了纯CSS写的，加载速度肉眼可见地快了，点击率也涨了不少。这就是为什么我一直强调，能写代码就别乱装插件，尤其是这种基础组件。
其实做水晶按钮的核心就两个东西：半透明渐变，还有那个关键的高光反射。很多新手做不好，是因为只加了背景色，忘了加内阴影和边框的透明度处理。
咱们直接看代码逻辑。首先，HTML部分特别简单，就是一个a标签或者button标签。
`html
`
重点全在CSS里。第一步，给按钮定个底色，别用纯色，用那种淡淡的蓝或者绿，带点透明感。比如 background: rgba(255, 255, 255, 0.2); 这样。然后，最关键的一步，加一个线性渐变。从左上角到右下角，颜色要从浅白过渡到稍微深一点的透明色。这就能模拟出光线打上去的感觉。
接着是边框。水晶嘛，肯定得有边缘的反光。给按钮加个 border: 1px solid rgba(255, 255, 255, 0.6);，注意这个透明度，不能太高，不然就成塑料了。
还有，别忘了一点点内阴影。用 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); 这个属性，在按钮内部上方加一层淡淡的白光，那种立体感立马就出来了。最后，hover的时候，稍微调亮一点背景，或者加个轻微的缩放动画，用户体验会好很多。
这里有个小坑，很多兄弟在写渐变的时候，浏览器兼容性问题没处理好，在老版本的IE或者某些安卓机上显示不正常。现在虽然IE基本可以放弃了，但为了保险起见，建议还是把 -webkit- 前缀加上，毕竟现在主流浏览器对webkit内核的支持还是最好的。
再分享个细节，水晶按钮的文字颜色千万别用纯黑，太死板。用深灰色，比如 #333 或者 #444，并且给文字加个轻微的投影 text-shadow: 0 1px 1px rgba(0,0,0,0.2);，这样字才能“浮”在玻璃表面，而不是贴在表面。
我有个做电商的朋友，之前按钮转化率一直上不去，换了这种水晶风格后，虽然只是视觉上的微调，但心理暗示作用很强，用户觉得这个按钮“可点击性”更高。当然，颜色选择很重要，如果是科技类网站，用冰蓝色；如果是促销类，用暖橙色或者红色，但都要保持那种通透感。
总之，网站如何做水晶按钮，真的不难。别被那些复杂的JS特效吓到，有时候最简单的CSS3就能达到意想不到的效果。代码写干净了，页面跑起来才流畅。希望这篇分享能帮到正在折腾自己网站的朋友。要是你试了代码发现效果不对，记得检查下那个半透明度的数值，有时候差0.1效果就差很多。好了，我去喝口水，继续改bug去了。
本文关键词：网站如何做水晶按钮