Todos los estados de un botón en CSS

Hover es el fácil. Los otros cinco son lo que lo hace sentirse terminado.

.button {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #2b6cb0;
  color: white;
  transition: background 120ms ease;
}

.button:hover { background: #24578f; }
.button:active { background: #1d456f; transition: none; }

.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }

Cómo funciona

1. :focus-visible muestra un anillo para el teclado y no para el mouse.
2. :active debe ser instantáneo; una transición ahí se siente lenta.
3. :disabled debe verse no disponible sin volverse ilegible.

Palabras clave y builtins usados aquí

• background
• border
• color
• cursor
• ms
• outline
• padding
• px
• rem
• transition

El intento, en números

Líneas

18

Caracteres a escribir

413

Tokens

98

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 69 segundos.

Escribe este fragmento

Paso 1 de 2 en Controles; paso 1 de 13 en Dar estilo a componentes.

Siguiente →