Back to CSS Floating Buttons Glass FAB Pure CSS
Share
.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