Stamp Text Hover Effect: CSS Hover Effect

Stamp Text Hover Effect

The word gets stamped: it slams down at an angle inside an inked frame, squashes on impact and settles, with tiny gaps in the ink. A one-shot keyframe on scale plus a dotted mask.

Also known as: rubber stamp effect, stamp animation css, approved stamp hover.

Approved

Color Base size 16px Dark background Hold hover state

HTML

<div class="hfx-text-stamp">Approved</div>

CSS

.hfx-text-stamp {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 1.8);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  padding: 0.12em 0.4em;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;}
.hfx-text-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.09em solid var(--c);
  border-radius: 0.18em;
  outline: 0.035em solid var(--c);
  outline-offset: -0.2em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hfx-text-stamp:hover {
  color: var(--c);
  /* two offset grids of pinholes read as worn ink */
  -webkit-mask:
    radial-gradient(circle, transparent 0.03em, #000 0.045em) 0 0 / 0.31em 0.27em,
    radial-gradient(circle, transparent 0.025em, #000 0.04em) 0.1em 0.05em / 0.23em 0.37em;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, transparent 0.03em, #000 0.045em) 0 0 / 0.31em 0.27em,
    radial-gradient(circle, transparent 0.025em, #000 0.04em) 0.1em 0.05em / 0.23em 0.37em;
  mask-composite: intersect;
  animation: hfx-text-stamp-thump 0.45s cubic-bezier(0.3, 0, 0.3, 1) both;
}
.hfx-text-stamp:hover::before { opacity: 1; }
@keyframes hfx-text-stamp-thump {
  0%   { transform: rotate(-8deg) scale(1.5); opacity: 0.4; }
  55%  { transform: rotate(-8deg) scale(0.93); opacity: 1; }
  78%  { transform: rotate(-8deg) scale(1.03); }
  100% { transform: rotate(-8deg) scale(1); }
}

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

Stamp Text Hover Effect

HTML

CSS

Customizing this snippet

Similar hover effects