Violeta con tracking

Violeta con tracking: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

solid flatroundedletter-spacing-hover

CSS

.btn-007 {
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .01em;
  color: #fff;
  background: #7c3aed;
  border: 0;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: letter-spacing .2s,background .2s
}
.btn-007:hover {
  background: #6d28d9;
  letter-spacing: .06em
}
.btn-007:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 3px
}
.btn-007:active {
  background: #5b21b6
}

HTML

<button class="btn-007">Join waitlist</button>

Prompt

Un botón violeta sólido #7c3aed, texto blanco de 14px semibold, radio de 8px, padding de 12px por 24px. Al pasar el cursor el fondo pasa a #6d28d9 y el espaciado entre letras se abre de 0.01em a 0.06em en 200ms. Active #5b21b6. Outline de foco de 2px violeta.

Violeta con tracking

Misma estantería