Family Button

<!-- Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="fam-root"><div class="fam" data-open="false"><div class="fam-panel"><button class="fam-action">&#9999;&#65039; Bewerk</button><button class="fam-action">&#128279; Deel</button><button class="fam-action">&#128465;&#65039; Verwijder</button></div><button class="fam-toggle" aria-label="Toggle">+</button></div></div>
</div>

/* Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.fam-root{position:absolute;inset:0;background:#0a0a10}
.fam{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fam-panel{display:flex;flex-direction:column;gap:8px;overflow:hidden;background:#15151d;border:1px solid #26262f;border-radius:18px;padding:0 8px;max-height:0;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),padding .4s}
.fam[data-open="true"] .fam-panel{max-height:180px;opacity:1;transform:translateY(0) scale(1);padding:8px}
.fam-action{cursor:pointer;white-space:nowrap;border:none;background:transparent;color:#e7e7ef;font:500 14px 'Switzer',sans-serif;padding:8px 12px;border-radius:10px;text-align:left;transition:background .2s}
.fam-action:hover{background:#23232e}
.fam-toggle{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:#F5480F;color:#fff;font:300 30px/1 'Switzer',sans-serif;box-shadow:0 8px 24px rgba(245,72,15,.5);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.fam[data-open="true"] .fam-toggle{transform:rotate(135deg)}

// Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var fam=root.querySelector('.fam');var toggle=root.querySelector('.fam-toggle');toggle.addEventListener('click',function(){fam.dataset.open=fam.dataset.open==='true'?'false':'true';});
}
init(document.querySelector('.jouw-container'));