Back to CSS Button Groups Stack Tower Pure CSS
Share
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; }