Tracking revelado

Tracking revelado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula cinza #f1f5f9 com texto em caixa alta de 13px bold #0f172a e tracking de 0.1em, padding de 13px por 22px. No hover o tracking abre para 0.3em em 300ms e uma seta para baixo (unicode 2193) aparece em fade depois da palavra; fundo #e2e8f0. Active #cbd5e1. Foco com outline escuro de 2px e offset de 2px.

Tracking revelado

Mesma prateleira