Classic Plus

The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow. The pattern every Material design system reaches for first.

Pure CSS MIT licensed

Classic Plus the 1st of 16 designs in the 16 CSS Floating Action Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<button type="button" class="cfb-classic" aria-label="Create new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</button>

.cfb-classic {
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(124,108,255,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
}
.cfb-classic:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(124,108,255,0.5);
  filter: brightness(1.05);
}
.cfb-classic:active { transform: translateY(-1px); }
.cfb-classic:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-classic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

More from 16 CSS Floating Action Button Designs

Speed Dial Pulse Ring Morphing FAB Labeled Pill Scroll to Top Neon Cyber Glass FAB Brutalist Stamp Notification Badge Drag Handle Premium Aurora Quick Reply

View the full collection →