Cómo incrustar una imagen en un botón en HTML

Para poner una imagen en un botón HTML, anide un <img> dentro de un <button>. Esta es la opción habitual para una acción como abrir un menú o guardar un cambio. Use <input type="image"> cuando la imagen deba enviar un formulario. Los controles tienen propósitos diferentes: type="image" no es un tipo válido para <button>.

Los ejemplos muestran marcado y CSS. El entorno de ejecución suministrado no renderiza una página del navegador, por lo que el primer ejemplo imprime el marcado para que lo coloque en una página; no afirma un resultado visual.

Agregar una imagen a un botón HTML nativo

Use un <button> nativo que contenga un <img> para una acción ordinaria. El siguiente pequeño ejemplo de JavaScript imprime un elemento de botón con un recurso de imagen incluido en el paquete. La imagen es decorativa porque el botón tiene su propio nombre accesible.

const button = '<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>';
console.log(button);

<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>

El valor de src es una ruta relativa a una imagen de este paquete de artículo. Sustitúyala por la ruta de su propia imagen al adaptar el ejemplo. type="button" es importante dentro de un formulario: sin un tipo explícito, un botón normalmente envía su formulario asociado. Si la imagen en sí comunica la acción y no hay otra etiqueta, asígnele un texto alternativo significativo, como <img src="button-image.webp" alt="Save">, y omita el aria-label. Si el texto visible ya nombra la acción, un alt vacío evita que una imagen redundante repita ese nombre. Evite dar a la imagen y al botón la misma etiqueta accesible.

Un botón nativo proporciona activación por teclado y comportamiento de foco. Mantenga un indicador de foco visible al aplicar estilos personalizados, para que los usuarios de teclado puedan saber qué control está activo.

Usar un input de imagen para el envío de formularios

Elija <input type="image"> cuando al activar la imagen deba enviar su formulario asociado. A diferencia de un botón nativo con una imagen anidada, este es en sí mismo un control de envío y no tiene ningún <img> anidado. Su src apunta a la imagen y su valor alt nombra el control. Por ejemplo, el formulario en línea <form action="/search" method="get"><label for="query">Search</label><input id="query" name="q"><input type="image" src="button-image.webp" alt="Search"></form> envía una solicitud de búsqueda cuando se activa el control de imagen. Adapte el destino del formulario y la ruta de la imagen a su página.

Un input de imagen participa en el envío del formulario y en la validación de restricciones. Al activarse, los navegadores también envían las coordenadas del clic con el nombre del control seguido de .x y .y; añada un name cuando el servidor necesite esos valores. Los atributos action y method del formulario establecen el destino y el método de solicitud predeterminados. formaction y formmethod en el input de imagen pueden anular esos valores predeterminados para ese envío. Use un input de imagen para una acción de formulario, no como sustituto de un botón de interfaz general.

Dar estilo y tamaño a un botón con imagen

Aplique una clase al botón nativo y luego dimensione su imagen anidada. Un botón de icono sin bordes puede usar padding: 0; border: 0; background: transparent;, mientras que la imagen puede usar display: block; width: 2rem; height: 2rem; object-fit: contain;. Estas declaraciones CSS son ejemplos de sintaxis en línea; añádalas a una hoja de estilos o a un elemento <style> de su página. Elija dimensiones que se ajusten a los controles circundantes. object-fit: contain mantiene la imagen completa visible en su caja. Para una imagen flexible, use max-width: 100%; height: auto; para permitir que se reduzca conservando sus proporciones.

Proporcione respuesta al pasar el cursor y conserve un estilo de foco de teclado, por ejemplo con button:hover y button:focus-visible. Un fondo, un borde o un relleno pueden hacer que un control de texto e imagen sea más fácil de reconocer como interactivo. No elimine el contorno del navegador a menos que proporcione un tratamiento de foco igualmente claro. Un input de imagen también puede dimensionarse mediante CSS, pero la regla se aplica a ese elemento input y no a una imagen anidada.

Elegir los atributos de imagen y de formulario

Use src para el archivo de imagen y alt para su nombre accesible o un valor en blanco cuando la imagen no añada información más allá del texto visible u otra etiqueta accesible. Establezca width y height en las dimensiones previstas de la imagen cuando se conozcan; reservan espacio en el diseño, mientras que CSS puede ajustar el tamaño renderizado para diseños más estrechos. Para un icono útil cuya acción no se indique en otra parte, elija un texto alternativo que describa la acción o el propósito con precisión.

Para <input type="image">, el atributo form puede asociar el control con un formulario situado en otro lugar del documento mediante el ID de ese formulario. formaction, formmethod, formenctype, formnovalidate y formtarget anulan los ajustes correspondientes del formulario para este control de envío. Use una anulación solo cuando este input de imagen necesite un comportamiento de envío diferente. Estos atributos de formulario no convierten un <button> nativo en un input de imagen, y no se aplican al <img> anidado de un botón.