Checkmark Draw Icon Hover: CSS Hover Effect

Checkmark Draw Icon Hover

A faint circled check that draws itself in: the ring traces around from the top, then the tick strokes in. A pathLength of 1 on each shape makes the dash math the same for both.

Also known as: check icon animation css, success icon stroke draw, tick draw hover.

Color Base size 16px Dark background Hold hover state

HTML

<button class="hfx-check-icon-draw" aria-label="Mark as done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g class="hfx-check-icon-draw-base"><circle cx="12" cy="12" r="9.5"/><path d="m7.8 12.4 2.9 2.9 5.6-6"/></g><circle class="hfx-check-icon-draw-ring" cx="12" cy="12" r="9.5" pathLength="1"/><path class="hfx-check-icon-draw-tick" d="m7.8 12.4 2.9 2.9 5.6-6" pathLength="1"/></svg></button>

CSS

.hfx-check-icon-draw {
  --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%;
  cursor: pointer;
  width: auto;
  height: auto;
  padding: 0.3em;
  background: transparent;
  color: var(--c);}
.hfx-check-icon-draw svg {
  width: 2.6em;
  height: 2.6em;
}
.hfx-check-icon-draw-base {
  stroke: color-mix(in srgb, var(--c) 35%, transparent);
}
.hfx-check-icon-draw-ring,
.hfx-check-icon-draw-tick {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.25s ease-in;
}
.hfx-check-icon-draw-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.hfx-check-icon-draw:is(:hover, :focus-visible) .hfx-check-icon-draw-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-check-icon-draw:is(:hover, :focus-visible) .hfx-check-icon-draw-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.3, 0, 0.2, 1) 0.4s;
}

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

Checkmark Draw Icon Hover

HTML

CSS

Customizing this snippet

Similar hover effects