Botões são elementos interativos fundamentais no design web. O Tailwind CSS oferece uma variedade de utilitários para estilizar botões de forma eficaz e gerenciar seus diferentes estados, como hover, focus e active.

Estilização Básica de Botão

Para estilizar um botão básico, utilize utilitários para cor de fundo, cor do texto, espaçamento interno (padding), borda arredondada e peso da fonte.

Explicação

1. bg-yellow-500: Define a cor de fundo como um tom de azul;
2. text-white: Define a cor do texto como branco;
3. font-bold: Deixa o texto em negrito;
4. py-2: Adiciona preenchimento vertical (0.5rem ou 8px);
5. px-4: Adiciona preenchimento horizontal (1rem ou 16px);
6. rounded: Adiciona cantos levemente arredondados.

Estado de Hover

Para alterar a aparência de um botão quando o usuário passa o mouse sobre ele, utilize o prefixo hover: com qualquer classe utilitária.

hover:bg-blue-700: Altera a cor de fundo para azul escuro quando o botão está em foco do mouse.

Estado de Foco

Para estilizar um botão quando ele está em foco (por exemplo, ao ser selecionado pelo teclado), utilize o prefixo focus: com qualquer classe utilitária.

Neste exemplo, ao passar o cursor do mouse sobre um botão, ele muda para azul. Se utilizar o botão Tab, o botão ficará vermelho.

Estados Ativo e Desabilitado

Estados ativo e desabilitado são usados com menos frequência. No entanto, também devem ser considerados.

Para estilizar um botão quando está ativo (por exemplo, ao ser clicado), utilize o prefixo active: com qualquer classe utilitária.

Para estilizar um botão quando está desabilitado (por exemplo, quando não pode ser interagido), utilize o prefixo disabled: com qualquer classe utilitária.

Explicação

1. active:bg-green-800: Altera a cor de fundo para um tom mais escuro de verde quando o botão está ativo (pressionado);
2. opacity-50: Reduz a opacidade do botão para indicar que está desabilitado;
3. cursor-not-allowed: Altera o cursor para indicar que o botão não é clicável;
4. Atributo disabled: Torna o botão não interativo.

Exemplo de Todos os Estados

Combinando todos os estados em um único exemplo

Explicação

1. bg-blue-500: Define a cor de fundo padrão;
2. hover:bg-blue-700: Altera a cor de fundo ao passar o mouse;
3. focus:outline-none: Remove o contorno padrão de foco;
4. focus:ring-2: Adiciona um anel de foco com largura de 2 pixels;
5. focus:ring-blue-600: Define a cor do anel de foco;
6. focus:ring-opacity-50: Define a opacidade do anel de foco;
7. active:bg-blue-800: Altera a cor de fundo quando o botão está ativo;
8. text-white: Define a cor do texto como branco;
9. font-bold: Deixa o texto em negrito;
10. py-2: Adiciona espaçamento vertical interno;
11. px-4: Adiciona espaçamento horizontal interno;
12. rounded: Adiciona cantos levemente arredondados.

Nota

Caso seja necessário aprofundar no Componente de Botão do Tailwind, aqui está um link para a documentação oficial.