Bouncing Social Icons Hover: CSS Hover Effect

Bouncing Social Icons Hover

Solid social buttons that hop in place while hovered, with a squash on take-off and landing and a floor shadow that shrinks as the icon rises. Playful footer or contact row.

Also known as: social icons jump on hover, bounce icon hover css, squash and stretch icons.

Color Base size 16px Dark background Hold hover state

HTML

<ul class="hfx-social-icons-bounce">
  <li><a class="hfx-social-icons-bounce-link" href="#" aria-label="Email"><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></li>
  <li><a class="hfx-social-icons-bounce-link" href="#" 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></a></li>
  <li><a class="hfx-social-icons-bounce-link" href="#" aria-label="Chat"><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></li>
  <li><a class="hfx-social-icons-bounce-link" href="#" aria-label="Website"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9.5"/><path d="M2.5 12h19M12 2.5c2.6 2.6 3.8 5.8 3.8 9.5s-1.2 6.9-3.8 9.5c-2.6-2.6-3.8-5.8-3.8-9.5s1.2-6.9 3.8-9.5Z"/></svg></a></li>
</ul>

CSS

.hfx-social-icons-bounce {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-bounce li {
  position: relative;
}
.hfx-social-icons-bounce li::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -0.55em;
  height: 0.3em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-social-icons-bounce-link {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  transform-origin: 50% 100%;
}
.hfx-social-icons-bounce-link svg {
  width: 1.3em;
  height: 1.3em;
}
.hfx-social-icons-bounce-link:is(:hover, :focus-visible) {
  animation: hfx-social-icons-bounce-hop 0.9s infinite;
}
.hfx-social-icons-bounce li:is(:hover, :focus-within)::after {
  animation: hfx-social-icons-bounce-shadow 0.9s infinite;
}
@keyframes hfx-social-icons-bounce-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  12%      { transform: translateY(0) scale(1.14, 0.84); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  45%      { transform: translateY(-1em) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.35); }
  76%      { transform: translateY(0) scale(1.1, 0.88); animation-timing-function: ease-out; }
  88%      { transform: translateY(0) scale(0.98, 1.02); }
}
@keyframes hfx-social-icons-bounce-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
  12%      { transform: scaleX(1.12); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  45%      { transform: scaleX(0.55); opacity: 0.45; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.35); }
  76%      { transform: scaleX(1.12); opacity: 1; animation-timing-function: ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .hfx-social-icons-bounce, .hfx-social-icons-bounce *, .hfx-social-icons-bounce::before, .hfx-social-icons-bounce::after, .hfx-social-icons-bounce *::before, .hfx-social-icons-bounce *::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

Social Icons with Tooltip Hover