Share Button Expand Hover: CSS Hover Effect

Share Button Expand Hover

A round share button that bursts into a row of share targets on hover, two to each side, springing out from center with the far ones a beat later. Works on focus too.

Also known as: share button hover css, social share buttons reveal, expanding share menu.

Color Base size 16px Dark background Hold hover state

HTML

<div class="hfx-social-share-expand">
  <a class="hfx-social-share-expand-item" href="#" aria-label="Share by email" style="--x: -2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></svg></a>
  <a class="hfx-social-share-expand-item" href="#" aria-label="Copy link" style="--x: -1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg></a>
  <a class="hfx-social-share-expand-item" href="#" aria-label="Send as message" style="--x: 1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.3A8.5 8.5 0 1 1 21 11.5Z"/></svg></a>
  <a class="hfx-social-share-expand-item" href="#" aria-label="Save for later" style="--x: 2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"/></svg></a>
  <button class="hfx-social-share-expand-toggle" aria-label="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></button>
</div>

CSS

.hfx-social-share-expand {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25em;
  height: 3.25em;
}
/* widens the hover area while open, so the gaps between items keep it open */
.hfx-social-share-expand::before {
  content: "";
  position: absolute;
  inset: 0;
}
.hfx-social-share-expand:is(:hover, :focus-within)::before { inset: 0 -8.5em; }
.hfx-social-share-expand-toggle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25em;
  height: 3.25em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.9em color-mix(in srgb, var(--c) 35%, transparent);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-share-expand-toggle svg {
  width: 1.35em;
  height: 1.35em;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-share-expand-item {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  opacity: 0;
  transform: translateX(0) scale(0.3);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background-color 0.2s ease;
}
.hfx-social-share-expand-item svg {
  width: 1.2em;
  height: 1.2em;
}
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-toggle { transform: scale(0.92); }
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-toggle svg { transform: rotate(-20deg); }
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-item {
  opacity: 1;
  transform: translateX(calc(var(--x) * 3.4em)) scale(1);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--x) * var(--x) * 30ms),
    opacity 0.2s ease calc(var(--x) * var(--x) * 30ms),
    background-color 0.2s ease;
}
.hfx-social-share-expand-item:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 28%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .hfx-social-share-expand, .hfx-social-share-expand *, .hfx-social-share-expand::before, .hfx-social-share-expand::after, .hfx-social-share-expand *::before, .hfx-social-share-expand *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hover effects

Profile Card Social Icons Hover

Social Icons Fill Up Hover

Social Icons Flip Hover

Bouncing Social Icons Hover