.cfb-glass-bg {
display: inline-flex;
padding: 24px;
border-radius: 16px;
background: linear-gradient(135deg, #2a1a4a 0%, #4a2a6a 50%, #ff6c8a 100%);
}
.cfb-glass {
width: 52px; height: 52px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.cfb-glass:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.45);
transform: translateY(-2px);
}
.cfb-glass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-glass svg { width: 20px; height: 20px; fill: currentColor; } <div class="cfb-glass-bg">
<button type="button" class="cfb-glass" aria-label="Quick action">
<svg viewBox="0 0 24 24" aria-hidden="true">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
</button>
</div> Live preview Edit any tab — preview updates live Ready