Um dos componentes mais comuns, mas muitas vezes pode visto de forma leviana pela sua simplicidade. Minha meta com esse artigo é você terminar sabendo pelo menos uma coisa nova sobre o queridinho dos polegares.
Semântica e acessiblidade
- Botões precisam ter um texto interno por questões de acessibilidade. Botões de ícone podem ter um texto descritivo também se você ocultar seu conteúdo interno pelo CSS, como por exemplo, usando uma classe
.sr-only
. Outra forma é atribuindo ao botão umaaria-label
. Existem várias formas de dar um nome acessível a um conteúdo, a atribuiçãoname
pode ser preenchida de forma hierárquica por desde texto interno, até atributostitle
e labels aria.
🔎 Falo mais sobre nome acessível e outras coisas no meu post sobre Semântica Web aqui no DevTo.
- Botões e outros elementos considerados "superfícies interativas" precisam ter um tamanho de no mínimo 44px x 44px, salvo se forem inline (links e inputs, por exemplo). O critério de sucesso 2.5.5 - Target Size da WCAG existe pra auxiliar pessoas com deficiência de visibilidade ou destreza a terem uma boa área de click, tornando a experiência menos frustrante ou difícil.
Leia mais sobre nesse post do Access Guide
- O botão tem o
type
implícito desubmit
, mas pra ele realmente submeter um formulário, ele precisa interceptar uma ativação implícita do evento submit. A implementação de HTMLFormElement busca a ocorrência de 1) um elemento button no escopo do formulário 2) um elemento button associado ao formulário via atributoform
. Na presença desses elementos, a variávelm_isActivatedSubmit
é definida comotrue. Se
m_isActivatedSubmite
m_typeforem
true`, o botão engatilha o evento de submit.
Estilo e design
- O tamanho do botão geralmente é relativo ao texto que ele contém, né? Se declararmos o padding com em, pra aumentarmos o botão basta aumentar o font-size dele. Isso acontece pois a unidade
em
escala proporcionalmente ao tamanho da fonte declarada no elemento ou seu parente. Na imagem abaixo, opadding
e oborder-radius
foram redeclarados comrem
e note como as bordas e padding vão parecer bem desproporcionais ao aumentar o tamanho do botão.
Com em
|
Com rem
|
---|---|
Ambos com font-size
de 3rem
- Use a propriedade
gap
pra separar o botão caso possa haver ícone! O espaçamento vai ser nulo quando tiver apenas o texto. Se o height do botão for fixo, use flexbox ou CSS grid comalign-items
pra centralizar, se você não tiver declarado height, usarpadding
igual no top e no bottom já alinham o conteúdo no centro perfeitamente.
- Texto do botão precisava estar em uma linha só e tá quebrando em duas? Já escrevi sobre isso ein? O segredo é priorizar medidas intrínsecas como
max-content
e em último caso bloquear o wrapping nowhite-space
.
Pra fechar, botão ou link?
Usar botão ou link?
- Ação? Botão
- Muda de localização? Link
Um guia muito bom pra tomar essa decisão é esse aqui:
Top comments (2)
Mto bom, parabéns Camilo.
O atributo form já me salvou uma vez que eu precisava colocar inputs fora da tag form por causa do layout
Post muito bacana!! Obrigado por compartilhar esse conteúdo.