HTML
<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> CSS
.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; }