AI CSS Animations

Social Icons Fill Up Hover

A row of outlined round social buttons whose fill rises from the bottom like liquid, with a domed edge that rolls as it climbs. One oversized pseudo-element per link.

Also known as: social media icons hover effect, social buttons fill on hover, footer social icons css.

HTML

<ul class="hfx-social-icons-fill-rise">
  <li><a class="hfx-social-icons-fill-rise-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-fill-rise-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-fill-rise-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-fill-rise-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-fill-rise {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-fill-rise-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border: 2px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  transition: color 0.3s ease 0.05s;
}
.hfx-social-icons-fill-rise-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -25%;
  top: 100%;
  width: 150%;
  height: 150%;
  border-radius: 42%;
  background: var(--c);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-social-icons-fill-rise-link svg {
  width: 1.3em;
  height: 1.3em;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible) { color: #fff; }
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible)::before {
  transform: translateY(-85%) rotate(120deg);
}
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible) svg { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .hfx-social-icons-fill-rise, .hfx-social-icons-fill-rise *, .hfx-social-icons-fill-rise::before, .hfx-social-icons-fill-rise::after, .hfx-social-icons-fill-rise *::before, .hfx-social-icons-fill-rise *::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 Flip Hover
Bouncing Social Icons Hover
Social Icons with Tooltip Hover