玻璃拟态按钮 · 按钮
前端Wiki/CSS 特效合集/玻璃拟态按钮

玻璃拟态按钮

彩色底上半透明磨砂按钮,悬停时材质更亮

← 返回 按钮 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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)}

HTML 结构

HTML
<div class="fx">
<button class="gt">玻璃按钮</button>
</div>
实现要点:玻璃感 = 半透明背景 + backdrop-filter 模糊 + 高光细边框

其它按钮类特效

回到 前端Wiki 首页 · CSS 特效合集