Countdown Timer Button: CSS Button Style & Animation

Countdown Timer Button

A limited offer button with a live timer chip that counts down from 04:59 second by second, and a stopwatch hand that ticks along. The digits are two registered @property integers shown as counters.

Also known as: countdown button css, limited time offer button, timer button css.

Color Base size 18px Dark background Hold hover state

HTML

<button class="btn-countdown-timer" type="button">
  Claim 40% off
  <span class="btn-countdown-timer-chip">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="13.5" r="7.5"/><path d="M10 3h4M12 3v3"/><path class="btn-countdown-timer-hand" d="M12 13.5V9"/></svg>
    <span class="btn-countdown-timer-time"></span>
  </span>
</button>

CSS

@property --btn-countdown-timer-m {
  syntax: "<integer>";
  inherits: false;
  initial-value: 4;
}
@property --btn-countdown-timer-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 59;
}
.btn-countdown-timer {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.8em;
  padding: 0.4em 0.4em 0.4em 1.3em;
  border-radius: 0.7em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.45em 1em -0.45em color-mix(in srgb, var(--c) 85%, transparent);
  transition: transform 0.15s ease, background-color 0.25s ease;}
.btn-countdown-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.6em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 60%, #000);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.btn-countdown-timer-chip svg {
  width: 1.1em;
  height: 1.1em;
}
.btn-countdown-timer-hand {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: btn-countdown-timer-tick 60s steps(60, end) infinite;
}
.btn-countdown-timer-time::before {
  counter-reset: m var(--btn-countdown-timer-m) s var(--btn-countdown-timer-s);
  content: counter(m, decimal-leading-zero) ":" counter(s, decimal-leading-zero);
  animation:
    btn-countdown-timer-sec 60s steps(60, end) infinite,
    btn-countdown-timer-min 300s steps(5, end) infinite;
}
.btn-countdown-timer:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 88%, #000); }
.btn-countdown-timer:active { transform: scale(0.97); }
@keyframes btn-countdown-timer-sec {
  from { --btn-countdown-timer-s: 59; }
  to   { --btn-countdown-timer-s: -1; }
}
@keyframes btn-countdown-timer-min {
  from { --btn-countdown-timer-m: 4; }
  to   { --btn-countdown-timer-m: -1; }
}
@keyframes btn-countdown-timer-tick {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-countdown-timer, .btn-countdown-timer *, .btn-countdown-timer::before, .btn-countdown-timer::after, .btn-countdown-timer *::before, .btn-countdown-timer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --btn-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --btn-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 18px.
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.

Countdown Timer Button

HTML

CSS

Customizing this snippet

Similar buttons