Video Record Shutter Button: CSS Button Style & Animation

Video Record Shutter Button

A camera app shutter: tap and the round dot shrinks into a stop square while a ring fills over a 15 second clip and the timer ticks. The timer is a registered @property integer printed with counter().

Also known as: record button ui, camera shutter button css, video record button animation, record button with timer.

Color Base size 18px Dark background Hold hover state

HTML

<label class="btn-record-shutter">
  <input class="btn-record-shutter-input" type="checkbox" aria-label="Record video">
  <span class="btn-record-shutter-time" aria-hidden="true"></span>
  <span class="btn-record-shutter-face" aria-hidden="true">
    <svg class="btn-record-shutter-ring" viewBox="0 0 44 44"><circle class="btn-record-shutter-track" cx="22" cy="22" r="20"/><circle class="btn-record-shutter-progress" cx="22" cy="22" r="20" pathLength="100"/></svg>
    <span class="btn-record-shutter-dot"></span>
  </span>
</label>

CSS

@property --btn-record-shutter-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.btn-record-shutter {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.55em;}
.btn-record-shutter-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-record-shutter-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font: 600 0.75em/1 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  counter-reset: btn-record-shutter-s var(--btn-record-shutter-s);
  opacity: 0.7;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.btn-record-shutter-time::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.btn-record-shutter-time::after { content: "0:" counter(btn-record-shutter-s, decimal-leading-zero) " / 0:15"; }
.btn-record-shutter-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.8em;
  height: 3.8em;
}
.btn-record-shutter-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
}
.btn-record-shutter-ring circle {
  fill: none;
  stroke-width: 3;
}
.btn-record-shutter-track {
  stroke: color-mix(in srgb, currentColor 22%, transparent);
  transition: stroke 0.3s ease;
}
.btn-record-shutter-progress {
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-record-shutter-dot {
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -0.2em 0.5em color-mix(in srgb, #000 18%, transparent);
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), border-radius 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-record-shutter:hover .btn-record-shutter-dot { transform: scale(0.92); }
.btn-record-shutter:hover .btn-record-shutter-track { stroke: color-mix(in srgb, currentColor 40%, transparent); }
.btn-record-shutter:active .btn-record-shutter-dot { transform: scale(0.84); }
.btn-record-shutter-input:focus-visible ~ .btn-record-shutter-face {
  outline: 2px solid var(--c);
  outline-offset: 0.15em;
  border-radius: 50%;
}
.btn-record-shutter-input:checked ~ .btn-record-shutter-face .btn-record-shutter-dot {
  transform: scale(0.45);
  border-radius: 0.6em;
}
.btn-record-shutter-input:checked ~ .btn-record-shutter-face .btn-record-shutter-progress {
  opacity: 1;
  animation: btn-record-shutter-fill 15s linear forwards;
}
.btn-record-shutter-input:checked ~ .btn-record-shutter-time {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  opacity: 1;
  animation: btn-record-shutter-count 15s linear forwards;
}
.btn-record-shutter-input:checked ~ .btn-record-shutter-time::before {
  opacity: 1;
  animation: btn-record-shutter-blink 1s steps(1) infinite;
}
@keyframes btn-record-shutter-fill {
  to { stroke-dashoffset: 0; }
}
@keyframes btn-record-shutter-count {
  to { --btn-record-shutter-s: 15; }
}
@keyframes btn-record-shutter-blink {
  50% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-record-shutter-input:checked ~ .btn-record-shutter-time::before { animation: none; }
  .btn-record-shutter-dot { transition-duration: 0.01s; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-record-shutter, .btn-record-shutter *, .btn-record-shutter::before, .btn-record-shutter::after, .btn-record-shutter *::before, .btn-record-shutter *::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.

Video Record Shutter Button

HTML

CSS

Customizing this snippet

Similar buttons