16 CSS Floating Action Button Designs

Brutalist Stamp

Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB. Press collapses into the shadow on focus / active for tactile feedback.

Brutalist Stamp the 9th 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

The code

<button type="button" class="cfb-brut">
  <span>NEW</span>
</button>

.cfb-brut {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 22px;
  border: 2.5px solid #1a1a2e;
  background: #f0eeff;
  color: #1a1a2e;
  font: 800 14px/1 'Courier New', monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: 6px 6px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cfb-brut:hover  { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 #ff6c8a; }
.cfb-brut:active,
.cfb-brut:focus-visible { transform: translate(6px,6px); box-shadow: 0 0 0 #ff6c8a; outline: none; }