Heart Like Button Hover: CSS Hover Effect

Heart Like Button Hover

An outlined heart that fills, throws out a ring of dots and keeps a lub-dub heartbeat while hovered. The dots are box-shadows on one pseudo-element, scaled outward.

Also known as: heart icon animation css, like button hover, heartbeat icon.

Color Base size 16px Dark background Hold hover state

HTML

<button class="hfx-heart-icon-beat" aria-label="Like"><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 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"/></svg></button>

CSS

.hfx-heart-icon-beat {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.hfx-heart-icon-beat svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-heart-icon-beat svg path {
  fill: transparent;
  transition: fill 0.2s ease;
}
/* six dots around the heart, drawn as shadows of one tiny dot */
.hfx-heart-icon-beat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.36em;
  height: 0.36em;
  margin: -0.18em;
  border-radius: 50%;
  box-shadow:
    0 -2.35em 0 var(--c), 2.04em -1.18em 0 var(--c), 2.04em 1.18em 0 var(--c),
    0 2.35em 0 var(--c), -2.04em 1.18em 0 var(--c), -2.04em -1.18em 0 var(--c);
  opacity: 0;
  pointer-events: none;
}
.hfx-heart-icon-beat:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-heart-icon-beat:is(:hover, :focus-visible) svg {
  animation: hfx-heart-icon-beat-beat 1.1s ease-in-out infinite;
}
.hfx-heart-icon-beat:is(:hover, :focus-visible) svg path { fill: currentColor; }
.hfx-heart-icon-beat:is(:hover, :focus-visible)::after {
  animation: hfx-heart-icon-beat-burst 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes hfx-heart-icon-beat-beat {
  0%, 60%, 100% { transform: scale(1); }
  14%           { transform: scale(1.28); }
  28%           { transform: scale(0.96); }
  42%           { transform: scale(1.16); }
}
@keyframes hfx-heart-icon-beat-burst {
  0%   { transform: scale(0.45); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

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

Heart Like Button Hover

HTML

CSS

Customizing this snippet

Similar hover effects