.floating-btn { position:fixed;top:100px;right:100px;z-index:99999;} .floating-btn .main-btn { width:50px;height:50px;border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:0 2px 6px 2px rgba(0, 0, 0, 0.3);transition:all 300ms ease;} .floating-btn.active .main-btn { transform:rotateZ(45deg);} .floating-btn .main-btn svg { width:30px;display:flex;} .floating-btn .options { position:absolute;transform:translate(30px, 30px) scale(0);opacity:0;transition:all 300ms ease;} .floating-btn.active .options { transform:translate(5px, 5px) scale(1);opacity:1;} .floating-btn .option { background:#eee;padding:8px 12px;border-radius:8px;box-shadow:0 4px 8px -3px rgba(0, 0, 0, 0.3);position:absolute;} .floating-btn .option a { text-decoration:none;color:#222;user-select:none;} .floating-btn .option:nth-child(1) { transform:translate(-74px, 20px) rotate(354deg);} .floating-btn .option:nth-child(2) { transform:translate(-62px, -33px) rotate(16deg);} .floating-btn .option:nth-child(3) { transform:translate(48px, 26px) rotate(12deg);} .floating-btn .option:nth-child(4) { transform:translate(45px, -30px) rotate(348deg);}