CSS3是现代Web设计中最为流行的样式语言之一。其突出的特性包括强大的选择器、响应式布局、绚丽的过渡动画和许多其他功能。其中一个特别引人注目的功能是水晶按钮。在本文中，我们将研究如何使用CSS3创建一个漂亮的水晶按钮。

.crystal-btn {display: inline-block;padding: 8px 20px;margin: 10px;border-radius: 25px;position: relative;text-align: center;font-weight: bold;color: #fff;text-shadow: 1px 1px 1px #333;box-shadow: 0px 0px 10px #bbb;background-color: #bf4f4f;background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));cursor: pointer; }.crystal-btn:hover {box-shadow: 0px 0px 20px #bbb;background-color: #f26d68; }.crystal-btn:before {content: "";position: absolute;top: 12px;left: 12px;right: 12px;bottom: 12px;border-radius: 25px;background-color: #fff;opacity: 0.15;z-index: -1; }.crystal-btn:after {content: "";position: absolute;top: -20px;left: -20px;right: -20px;bottom: -20px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.2);z-index: -2; }

按钮的背景由两个颜色定义组成，其中一个是渐变透明度的纯白色，在这个渐变的起点和终点处都有一个完全透明的白色。这可以给按钮一个干净、明亮的外观。

按钮的效果在鼠标悬停时发生。在这种情况下，按钮的背景颜色会变得更亮，同时也会出现更多的阴影和发光效果，这可以增加按钮的视觉吸引力。

总体来说，CSS3水晶按钮是一种简单、易于创建和非常适合各种网站设计和应用的按钮。尝试一下吧！