Carregando...

Botões em CSS

Botões são os controles de «faça isso» — enviar, guardar, seguinte. CSS pode dar-lhes uma pele clara e um retorno honesto ao passar o rato, premir, focar ou encontrá-los desativados. Mantenha o HTML semântico (button ou input submit); esta lição é sobre aspeto e estados.

Um kit de botões

📊 Botões num olhar

Peça Trabalho do dia a dia
padding + background + border Construir uma face de botão sólida e legível
border-radius Suavizar cantos (ou ir a pílula com raio grande)
:hover / :active Mostrar «sou interativo» e «estou premido»
:focus-visible Manter visível o anel de foco do teclado
:disabled + cursor Atenuar botões indisponíveis; cursor de mão quando clicável

Estilize uma .btn partilhada (ou button) para as ações principais da página combinarem. O padding de campos de texto foi a lição anterior — aqui vestimos os alvos de clique.

Um botão primário sólido

Comece com padding confortável, fundo claro, cor de texto legível e border-radius calmo. Prefira font: inherit para o botão combinar com o texto próximo.

Botão primário base

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover e active — retorno honesto

:hover pode escurecer ou clarear um pouco a face. :active deve sentir-se premido — um tom mais escuro ou um pequeno deslocamento — não um tema néon totalmente novo.

Hover e active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Foco que se vê

Nunca remova estilos de foco sem substituto. :focus-visible desenha um anel claro para teclado e mantém cliques do rato calmos.

Anel de foco visível

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Botões disabled continuam visíveis

Um botão desativado deve parecer indisponível — menor opacidade ou cores atenuadas — e recusar o cursor de mão. Não o esconda do layout.

Tom disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Um hábito calmo de botão

Mantenha uma pele primária, hover/active claros, um anel de foco visível e disabled atenuado. Variantes outline/ghost podem partilhar o mesmo padding e raio para o conjunto parecer aparentado.

Companheiro outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Experimente você

  1. Estilize um button primário com padding, fundo, cor de texto e border-radius.
  2. Escureça :hover e aprofunde um pouco :active.
  3. Adicione outline :focus-visible — sem outline: none nu.
  4. Atenue um botão :disabled e defina cursor: not-allowed.
  5. Opcional: adicione um .btn-outline irmão que partilhe padding e raio.

Erros comuns

  • outline: none sem substituto de foco (utilizadores de teclado perdem-se)
  • Padding minúsculo que falha alvos de toque no telemóvel
  • Transformar esta lição em estilo de input/textarea (isso foi controlos de formulário)
  • Tema néon selvagem no :hover que quebra a calma da marca
  • Estilizar só etiquetas a e esquecer button reais

Resumo

  • Padding, fundo, borda e raio constroem uma face de botão sólida
  • :hover e :active dão retorno honesto de interação
  • Mantenha um anel :focus-visible visível
  • Atenue :disabled; use cursor: pointer quando for clicável
  • Deixe o chrome de campos à lição de controlos de formulário; aqui vestimos alvos de clique

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 34 de 35
Css Tutorial