Tracking que se abre

Tracking que se abre: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Una píldora gris #f1f5f9 con texto #0f172a en mayúsculas de 13px en negrita con 0.1em de tracking, padding de 13px por 22px. Al pasar el cursor el tracking se expande a 0.3em en 300ms y aparece en fundido una flecha hacia abajo (unicode 2193) tras la palabra; fondo #e2e8f0. Active #cbd5e1. Foco con outline oscuro de 2px y offset de 2px.

Tracking que se abre

Misma estantería