29.11.2024

Adicionando e Alinhando um Ícone em um Botão HTML Usando CSS

Resumo Rápido

Se você precisa adicionar rapidamente um ícone a um <input type="button">, use a propriedade background em CSS:

<input type="button" class="icon-btn">

.icon-btn {
  background: url('icon.png') no-repeat center / contain; 
  border: none;
  padding: 10px;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

As proporções de height e width devem corresponder às dimensões do ícone.

Detalhes e Compatibilidade: Garantindo que o Botão Funcione em Todos os Navegadores

Preste atenção aos detalhes para melhorar a usabilidade e a percepção visual.

Ajustando o Padding: Criando Espaço para o Ícone

Para evitar que o texto sobreponha o ícone, defina um padding maior:

.icon-btn {
  padding-left: 30px;
}

Isso proporcionará espaço suficiente tanto para o ícone quanto para o tamanho total do botão.

Sprites: Gerenciando Vários Ícones

Se você precisa trabalhar com muitos ícones, use sprites CSS para reduzir o número de requisições HTTP:

.icon-btn {
  background-image: url('icons-sprite.png');
  background-position: -20px 0;
}

Esse método melhora o desempenho e simplifica a manutenção.

Estruturas Avançadas: Mais Opções com <button> e <img>

<button class="button-with-img-icon" type="button">
  <img src="icon.png" alt="Descrição do Ícone" height="16" width="16">
  Falar em Voz Alta
</button>

Ao editar o documento com CSS flexbox ou CSS grid, podemos organizar a disposição do ícone e do texto.

Visualização

Adicionar um ícone de imagem a um botão pode ser comparado a transformar uma tela em branco em uma obra de arte:

Antes: 🖼 (Tela em Branco)

Para transformá-la, você precisa usar background-image e algumas pequenas transformações CSS:

.button-with-icon {
    background-image: url('icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

E aqui está o resultado:

Depois: 🖼🖌 (Obra de Arte Vibrante e Clicável)

A transformação foi alcançada utilizando recursos de código aberto.

Continue Melhorando: Aprimore o Design do Botão

Adicionando Dinamismo com Pseudo-elementos

.icon-btn:after {
  content: url('icon.png');
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

Essa solução adiciona dinamismo e interatividade usando apenas CSS.

Abordando Problemas de Compatibilidade entre Navegadores: Garantindo Funcionalidade Consistente no Opera e Chrome

Verifique se <input type="button"> e <button> são exibidos corretamente em todos os navegadores.

Acessibilidade: Cada Clique Conta

Cuide da acessibilidade do botão adicionando textos alternativos para imagens e atributos ARIA apropriados para garantir a usabilidade para todos os usuários.

Recursos Úteis

1. O elemento Input (Entrada de Formulário) — HTML: Linguagem de Marcação de Hipertexto | MDN — um artigo detalhado nos MDN Web Docs sobre o elemento <input>.
2. Como Criar Botões com Ícones — um guia prático do W3Schools sobre estilização de botões com ícones.
3. Fontes de Ícones são Incríveis — uma análise de fontes de ícones no CSS-Tricks.
4. Encontre Ícones com a Aparência e Sensação Perfeitas | Font Awesome — uma biblioteca extensa de ícones Font Awesome.
5. Uso de SVG use com Referência Externa, Parte 2 | CSS-Tricks — sobre o uso de SVG para ícones no CSS-Tricks.
6. Usando SVG para Fundos Flexíveis, Escaláveis e Divertidos, Parte I – A List Apart — sobre a aplicação de SVG em imagens de fundo na A List Apart.

Video

Navigation