Ferro Toolbar
Icon toolbar where icons subtly tilt toward your cursor as you sweep across — pure CSS, driven by --mx via inline style on the parent. No JS required.
Ferro Toolbar the 16th of 22 designs in the 22 CSS Button Group 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
<div
class="cbgp-ferro"
role="toolbar"
aria-label="Editor tools"
onmousemove="
event.currentTarget.style.setProperty(
'--mx',
((event.offsetX / event.currentTarget.offsetWidth) * 2 - 1).toFixed(2),
)
"
>
<button type="button" aria-label="Undo" title="Undo (⌘Z)">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7v6h6M3 13a9 9 0 1 0 3-6.7L3 9" /></svg>
</button>
<button type="button" aria-label="Redo" title="Redo (⌘⇧Z)">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 7v6h-6M21 13a9 9 0 1 1-3-6.7L21 9" />
</svg>
</button>
<span class="cbgp-ferro-divider" aria-hidden="true"></span>
<button type="button" aria-label="Cut" title="Cut (⌘X)">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="6" cy="6" r="3" />
<circle cx="6" cy="18" r="3" />
<line x1="20" y1="4" x2="8.12" y2="15.88" />
<line x1="14.47" y1="14.48" x2="20" y2="20" />
</svg>
</button>
<button type="button" aria-label="Copy" title="Copy (⌘C)">
<svg viewBox="0 0 24 24" aria-hidden="true">
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
</button>
<button type="button" aria-label="Paste" title="Paste (⌘V)">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" />
</svg>
</button>
</div> .cbgp-ferro {
--mx: 0;
display: inline-flex; gap: 4px; align-items: center;
padding: 6px;
background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
perspective: 600px;
box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-ferro button {
width: 36px; height: 36px;
border: 0; cursor: pointer;
background: transparent;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transition: transform 0.4s cubic-bezier(.65,0,.35,1), background 0.2s;
transform: rotateY(calc(var(--mx) * 18deg));
}
.cbgp-ferro button:hover { background: rgba(0,255,224,0.08); }
.cbgp-ferro button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-ferro svg { width: 14px; height: 14px; fill: none; stroke: rgba(220,225,230,0.65); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-ferro button:hover svg { stroke: #00ffe0; }
.cbgp-ferro-divider {
width: 1px; height: 22px;
background: linear-gradient(180deg, transparent, rgba(0,255,224,0.5), transparent);
margin: 0 4px;
}