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çãonamepode ser preenchida de forma hierárquica por desde texto interno, até atributostitlee 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
typeimplí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. Sem_isActivatedSubmitem_typeforemtrue`, 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
emescala proporcionalmente ao tamanho da fonte declarada no elemento ou seu parente. Na imagem abaixo, opaddinge oborder-radiusforam redeclarados comreme 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
gappra 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-itemspra centralizar, se você não tiver declarado height, usarpaddingigual 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-contente 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:
A Complete Guide to Links and Buttons | CSS-Tricks - CSS-Tricks
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
css-tricks.com
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.