Social Share Dock

<div class="shd"><button class="shd-main">↗</button><div class="shd-items"><a style="--c:#1da1f2">𝕏</a><a style="--c:#0077b5">in</a><a style="--c:#ff0000">▶</a><a style="--c:#25d366">✆</a></div></div>

body{background:#f6f7fa}
.shd{display:flex;align-items:center;gap:10px}
.shd-main{width:52px;height:52px;border-radius:50%;border:0;background:#1a1f36;color:#fff;font-size:22px;cursor:pointer;flex:none;transition:transform .3s}
.shd:hover .shd-main{transform:rotate(45deg)}
.shd-items{display:flex;gap:8px}
.shd-items a{width:44px;height:44px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;cursor:pointer;opacity:0;transform:scale(0) translateX(-20px);transition:.3s}
.shd:hover .shd-items a{opacity:1;transform:none}
.shd:hover .shd-items a:nth-child(2){transition-delay:.05s}
.shd:hover .shd-items a:nth-child(3){transition-delay:.1s}
.shd:hover .shd-items a:nth-child(4){transition-delay:.15s}