DEV Community

Cover image for Coisas que você talvez não saiba sobre botões no HTML
Camilo Micheletto
Camilo Micheletto

Posted on

Coisas que você talvez não saiba sobre botões no HTML

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 uma aria-label. Existem várias formas de dar um nome acessível a um conteúdo, a atribuição name pode ser preenchida de forma hierárquica por desde texto interno, até atributos title 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 de submit, 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 atributo form. Na presença desses elementos, a variável m_isActivatedSubmit é definida como true. Sem_isActivatedSubmitem_typeforemtrue`, o botão engatilha o evento de submit.

C


Implementação do HTMLButtonElement no código fonte do Blink, engine do Google Chrome.

 


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, o padding e o border-radius foram redeclarados com rem e note como as bordas e padding vão parecer bem desproporcionais ao aumentar o tamanho do botão.
Com em Com rem
Button com em Button 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 com align-items pra centralizar, se você não tiver declarado height, usar padding igual no top e no bottom já alinham o conteúdo no centro perfeitamente.

Dois botões, um com ícone e outro sem ícone, ambos mantendo espaçamentos proporcionais graças à propriedade gap

 

 

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:

Links And Buttons Guide | CSS-Tricks

Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

favicon css-tricks.com

Top comments (2)

Collapse
 
demenezes profile image
deMenezes

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

Collapse
 
cristianmeelo profile image
Cristian Melo

Post muito bacana!! Obrigado por compartilhar esse conteúdo.