Tracking-Reveal

Tracking-Reveal: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

text-swapexpandpilluppercaseletter-spacing

CSS

.btn-118 {
  font: 700 13px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #0f172a;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  transition: background .2s
}
.btn-118 span {
  display: inline-block;
  transition: letter-spacing .3s
}
.btn-118 span::after {
  content: " \2193";
  opacity: 0;
  transition: opacity .3s
}
.btn-118:hover {
  background: #e2e8f0
}
.btn-118:hover span {
  letter-spacing: .3em
}
.btn-118:hover span::after {
  opacity: 1
}
.btn-118:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px
}
.btn-118:active {
  background: #cbd5e1
}

HTML

<button class="btn-118"><span>Menu</span></button>

Prompt

Eine graue #f1f5f9 Pille mit Text in Versalien 13px bold #0f172a bei 0.1em Tracking, 13px mal 22px Padding. Beim Hover weitet sich das Tracking in 300ms auf 0.3em und ein Pfeil nach unten (Unicode 2193) blendet sich hinter dem Wort ein; Hintergrund #e2e8f0. Active #cbd5e1. Fokus 2px dunkle Outline mit 2px Offset.

Tracking-Reveal

Gleiches Regal