Anulación de estilos de botón predeterminados | Programar Plus

Hay una variedad de “botones” en HTML. Tienes:

<button>Button</button>
<input type="button" value="Button">

Además, para bien o para mal, a las personas les gusta tener enlaces diseñados para que coincidan con el aspecto de otros botones reales del sitio.

<a href="https://css-tricks.com/overriding-default-button-styles/#0" class="button">Button</a>

Un desafío es lograr que todos esos elementos se vean y se distribuyan exactamente de la misma manera. Cubriremos eso de algunas maneras.

Otro desafío es lograr que la gente los use correctamente

Esto es un poco sorprendente para mí, pero lo escucho con suficiente frecuencia como para preocuparme, es que cada vez más desarrolladores usan <div>s para botones. Al igual que en, solo buscan cualquier HTML genérico y sin estilo que sea útil y lo construyen según sea necesario. Andy Bell explica por qué es mejor un botón real:

Entonces, <button> Los elementos son un dolor de cabeza para estilizar, ¿verdad? Eso no significa que deba adjuntar sus eventos de JavaScript a un <div> o un <a href="https://css-tricks.com/overriding-default-button-styles/#"> sin embargo. Verás, cuando usas un <button>, obtienes eventos de teclado gratis. También está ayudando a los usuarios de lectores de pantalla porque anunciará el elemento correctamente.

Y aquí está Andy nuevamente ayudándote con un trozo de CSS que te dará un botón con un estilo limpio:

Vea Pen Button Pal: algunos estilos de botones básicos de Andy Bell (@hankchizljaw) en CodePen.

Es ese estilo el que podría ser el obstáculo mental

Es un poco comprensible. ¡Los botones son raros! Tienen una buena cantidad de estilos predeterminados (que provienen de la “Hoja de estilo del agente de usuario”) que varía de un navegador a otro y significa que tiene trabajo que hacer para obtenerlos exactamente como lo desea.

¿Ves toda la rareza allí?

  • Sin ningún estilo, el botón es un poco pequeño y tiene ese borde nativo / radio de borde / sombra de caja.
  • Con solo establecer el tamaño de fuente, perdemos todos esos valores predeterminados, pero tiene un nuevo aspecto predeterminado, uno con un borde y esquinas cuadradas, un fondo degradado y sin sombra de cuadro. Esto es esencialmente -webkit-appearance: button;.
  • Los botones tienen su propia familia de fuentes, así que no heredes de la cascada a menos que tú lo digas.

Aquí está la hoja de estilo del agente de usuario de Chrome para botones:

Firefox se comporta de forma un poco diferente. Vea en el video de arriba cómo configurar border: 0; eliminado el borde en Chrome, pero también el fondo? No es el caso en Firefox:

Solo señalo esto para decir, lo entiendo, los botones son cosas realmente extrañas en los navegadores. Considere una docena de otros navegadores, dispositivos móviles, y la idea de que queremos diseñar todos esos elementos diferentes para que se vean exactamente iguales (vea la apertura del artículo), y tengo un mínimo de empatía por las personas que desean evitar esto.

Nunca está de más consultar Normalizar

Normalizar hace una buena cantidad:

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

Me sorprendió un poco ver WTF, Forms? no cubre botones, solo por la rareza que hay. ¡Pero los elementos de forma que proyectan látigos en forma son aún más notoriamente difíciles!

Un poco de prueba de estilo

Siento que la respuesta a esto es básicamente un gran bloque de CSS. Eso es lo que Andy proporcionó, y es muy probable que pueda llegar a uno por su cuenta con solo ser un poco más pesado de lo habitual al establecer reglas de estilo con sus botones.

Aún así, me sentí obligado a hacer una pequeña máquina de prueba para que puedas activar y desactivar estilos y ver cómo van todos juntos en cualquier navegador en el que te encuentres:

Vea los estilos de botones coherentes con el lápiz de Chris Coyier (@chriscoyier) en CodePen.

A11y

El punto más importante aquí es usar los elementos nativos correctos, ya que obtienes un montón de funcionalidad y accesibilidad de forma gratuita. ¡Pero también podrías conseguir el estilo correcto!

Mientras hablamos de botones, usaré la misma cita que usé en nuestra publicación Cuándo usar el elemento de botón de MDN:

Advertencia: Tenga cuidado al marcar enlaces con la función del botón. Se espera que los botones se activen con la tecla Espacio, mientras que se espera que los enlaces se activen con la tecla Intro. En otras palabras, cuando los enlaces se utilizan para comportarse como botones, agregar role="button" solo no es suficiente. También será necesario agregar un controlador de eventos clave que escuche la tecla Espacio para ser coherente con los botones nativos.

No necesitas role="button" sobre <button> porque ya son botones, pero si va a hacer que cualquier otro elemento se parezca a un botón, tiene más trabajo por hacer para imitar la funcionalidad.

Además, no te olvides de :hover y :focus estilos! Una vez que haya disputado los estilos para el estado predeterminado, esto no debería ser tan difícil, ¡pero definitivamente los necesita!

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}