32 CSS Floating Action Button Designs 25 / 32
Brutalist Stamp
Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB.
The code
<button type="button" class="cfb-brut"> <span>NEW</span> </button>
<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; } .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; }