<style> .btn { display: inline-block; padding: 10px 25px; font-size: 18px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: linear-gradient(to bottom, #286090, #1C4E7E); border: none; outline: none; border-radius: 40px; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn:hover { background: linear-gradient(to bottom, #1C4E7E, #286090); } </style>
上面的 CSS 代码展示了实现深蓝色水晶按钮所需的样式。关键点包括:
- 使用线性渐变为按钮添加深蓝色阴影。
- 使用投影来使按钮看起来更加立体。
- 在用户鼠标悬停时,改变渐变以添加动态效果。
将这段 CSS 和按钮的 HTML 代码组合起来,大家将得到一个具有深蓝色水晶效果的漂亮按钮。
<button class="btn">立即注册</button>
通过 CSS 的强大功能,大家可以很容易地创建漂亮的深蓝色水晶按钮。使用这种按钮,可以让您的网站看起来更专业和吸引人。