Expanding FAB Menu

<div class="fab" id="fab">
  <button class="fab-main" id="fabMain"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" d="M12 5v14M5 12h14"/></svg></button>
  <button class="fab-item" style="--i:1"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="#fff" d="M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.6 5.7 21l2.3-7.2-6-4.4h7.6z"/></svg></button>
  <button class="fab-item" style="--i:2"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="#fff" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z"/></svg></button>
  <button class="fab-item" style="--i:3"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="#fff" d="M16 1H4a2 2 0 00-2 2v14h2V3h12zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2z"/></svg></button>
</div>

body{background:#f6f7fa}
.fab{position:relative;width:60px;height:60px}
.fab-main{width:60px;height:60px;border-radius:50%;border:0;background:linear-gradient(135deg,#ff7a18,#ff477e);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(255,71,126,.45);transition:transform .3s;z-index:2;position:relative}
.fab.open .fab-main{transform:rotate(135deg)}
.fab-item{position:absolute;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;background:#1a1f36;cursor:pointer;display:grid;place-items:center;opacity:0;transform:scale(0);transition:.3s;transition-delay:0s}
.fab.open .fab-item{opacity:1;transform:scale(1) translateY(calc(var(--i) * -58px));transition-delay:calc(var(--i) * 0.05s)}

var f=document.getElementById('fab');document.getElementById('fabMain').onclick=function(){f.classList.toggle('open')};