Como incorporar uma imagem em um botão em HTML

Para colocar uma imagem em um botão HTML, aninhe um <img> dentro de um <button>. Esta é a escolha usual para uma ação como abrir um menu ou salvar uma alteração. Use <input type="image"> quando a imagem deve enviar um formulário. Os controles têm finalidades diferentes: type="image" não é um tipo válido para <button>.

Os exemplos mostram marcação e CSS. O ambiente de execução fornecido não renderiza uma página do navegador, portanto o primeiro exemplo imprime a marcação para você colocar em uma página; ele não afirma um resultado visual.

Adicionar uma imagem a um botão HTML nativo

Use um <button> nativo contendo um <img> para uma ação comum. O pequeno exemplo de JavaScript a seguir imprime um elemento de botão com um recurso de imagem incluído no pacote. A imagem é decorativa porque o botão tem seu próprio nome acessível.

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>

O valor de src é um caminho relativo para uma imagem neste pacote do artigo. Substitua-o pelo caminho da sua própria imagem ao adaptar o exemplo. type="button" importa dentro de um formulário: sem um tipo explícito, um botão normalmente envia o formulário associado. Se a própria imagem comunica a ação e não há outro rótulo, dê a ela um texto alternativo significativo, como <img src="button-image.webp" alt="Save">, e omita o aria-label. Se o texto visível já nomeia a ação, um alt vazio impede que uma imagem redundante repita esse nome. Evite dar à imagem e ao botão o mesmo rótulo acessível.

Um botão nativo oferece ativação por teclado e comportamento de foco. Mantenha um indicador de foco visível ao aplicar estilos personalizados, para que os usuários de teclado possam saber qual controle está ativo.

Usar um input de imagem para envio de formulário

Escolha <input type="image"> quando a ativação da imagem deve enviar o formulário associado. Ao contrário de um botão nativo com uma imagem aninhada, este é ele próprio um controle de envio e não tem nenhum <img> aninhado. Seu src aponta para a imagem e seu valor alt nomeia o controle. Por exemplo, o formulário embutido <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> envia uma solicitação de pesquisa quando o controle de imagem é ativado. Adapte o destino do formulário e o caminho da imagem à sua página.

Um input de imagem participa do envio do formulário e da validação de restrições. Na ativação, os navegadores também enviam as coordenadas do clique sob o nome do controle seguido de .x e .y; adicione um name quando o servidor precisar desses valores. Os atributos action e method do formulário definem o destino e o método de solicitação padrão. formaction e formmethod no input de imagem podem substituir esses padrões para esse envio. Use um input de imagem para uma ação de formulário, e não como substituto de um botão de interface geral.

Estilizar e dimensionar um botão com imagem

Aplique uma classe ao botão nativo e, em seguida, dimensione a imagem aninhada. Um botão de ícone sem borda pode usar padding: 0; border: 0; background: transparent;, enquanto a imagem pode usar display: block; width: 2rem; height: 2rem; object-fit: contain;. Essas declarações CSS são exemplos de sintaxe embutida; adicione-as a uma folha de estilo ou a um elemento <style> da sua página. Escolha dimensões que se ajustem aos controles ao redor. object-fit: contain mantém a imagem inteira visível em sua caixa. Para uma imagem flexível, use max-width: 100%; height: auto; para permitir que ela encolha preservando suas proporções.

Forneça feedback ao passar o mouse e mantenha um estilo de foco de teclado, por exemplo com button:hover e button:focus-visible. Um fundo, uma borda ou um preenchimento podem tornar um controle de texto e imagem mais fácil de reconhecer como interativo. Não remova o contorno do navegador, a menos que você forneça um tratamento de foco igualmente claro. Um input de imagem também pode ser dimensionado via CSS, mas a regra se aplica a esse elemento input, e não a uma imagem aninhada.

Escolher os atributos de imagem e de formulário

Use src para o arquivo de imagem e alt para seu nome acessível ou um valor em branco quando a imagem não acrescenta informação além do texto visível ou de outro rótulo acessível. Defina width e height com as dimensões pretendidas da imagem quando forem conhecidas; eles reservam espaço no layout, enquanto o CSS pode ajustar o tamanho renderizado para layouts mais estreitos. Para um ícone útil cuja ação não esteja indicada em outro lugar, escolha um texto alternativo que descreva a ação ou a finalidade com precisão.

Para <input type="image">, o atributo form pode associar o controle a um formulário em outro lugar do documento pelo ID desse formulário. formaction, formmethod, formenctype, formnovalidate e formtarget substituem as configurações correspondentes do formulário para este controle de envio. Use uma substituição apenas quando este input de imagem precisar de um comportamento de envio diferente. Esses atributos de formulário não transformam um <button> nativo em um input de imagem, nem se aplicam ao <img> aninhado de um botão.