彩色底上半透明磨砂按钮,悬停时材质更亮
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx{background:linear-gradient(135deg,#f778ba,#4a9eff 55%,#57ab5a);border-radius:10px;padding:44px 0;text-align:center}
.fx .gt{display:inline-block;padding:13px 34px;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:15px;cursor:pointer;transition:background .3s}
.fx .gt:hover{background:rgba(255,255,255,.22)}<div class="fx">
<button class="gt">玻璃按钮</button>
</div>