Stack Tower
Vertical action column where each row pushes 8px deeper on hover, and the whole stack rotates 1° in 3D. SVG icons recolor with a gradient stroke.
Stack Tower the 9th 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-tower" role="group" aria-label="Profile actions">
<button type="button">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="8" r="4" />
<path d="M4 21a8 8 0 0 1 16 0" /></svg
>Profile
</button>
<button type="button">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a2 2 0 0 0 .4 2.2l.1.1a2.5 2.5 0 1 1-3.5 3.5l-.1-.1a2 2 0 0 0-2.2-.4 2 2 0 0 0-1.2 1.8V22a2.5 2.5 0 0 1-5 0v-.1a2 2 0 0 0-1.3-1.8 2 2 0 0 0-2.2.4l-.1.1a2.5 2.5 0 1 1-3.5-3.5l.1-.1a2 2 0 0 0 .4-2.2"
/></svg
>Settings
</button>
<button type="button">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg
>Sign out
</button>
</div> .cbgp-tower {
display: inline-flex; flex-direction: column;
background: rgba(8,10,18,0.92);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
min-width: 200px;
perspective: 600px;
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(.65,0,.35,1);
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.cbgp-tower:hover { transform: rotateY(-3deg) rotateX(2deg); }
.cbgp-tower button {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px;
border: 0; border-bottom: 1px solid rgba(255,255,255,0.04);
background: transparent;
color: rgba(220,225,230,0.85);
font: 600 13px/1 ui-sans-serif, system-ui;
cursor: pointer;
text-align: left;
transition: background 0.2s, transform 0.3s cubic-bezier(.65,0,.35,1);
}
.cbgp-tower button:last-child { border-bottom: 0; }
.cbgp-tower button:hover {
background: linear-gradient(90deg, rgba(0,255,224,0.06), rgba(255,90,241,0.04));
color: #fff;
transform: translateZ(8px);
}
.cbgp-tower svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: rgba(0,255,224,0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-tower button:hover svg { stroke: #00ffe0; }
.cbgp-tower button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }