Botões: button, submit e reset
Artigo a respeito dos controles button, submit e reset (formulário web) - HTML e CSS

Os velhos e bons botões

O botão abaixo precisaria de um código JavaScript para realizar a submissão da página.

<input type="button" value="Enviar formulário" />

O botão submit “já vem pré programado” para realizar o submit, ou seja, não precisaremos “codar” em JavaScript.

<input type="submit" value="Enviar formulário" />

O botão reset já não se usa mais, ele limpa as entradas do campos e, como o botão submit, ele já vem pré programado.

<input type="reset" value="Apagar formulário" />

Visualmente eles são muito parecidos, mas “por de baixo do pano” são bem diferentes.

Repare que a propriedade value de ambos os botões servem como uma estampa (label).

Os novos botões

A tag <button> é o que temos de mais atual quando falamos de botões HTML. Ela é mais fácil de estilizar, pois dentro dela podemos inserir tags como por exemplo <em>, <strong> ou <img>.

<button name="button">Enviar formulário</button>

Da mesma forma que o elemento input, o atributo type também se faz presente, podendo conter um dos valores abaixo:

• submit
• reset
• button (padrão)

Leia mais sobre o elemento na documentação da MDN - button.

Estilizando

O desafio de estilizar botões é manter um “set” de classes que possam ser utilizados em conjunto. Tomemos como exemplo as classes do framework Bootstrap:

<button class="btn btn-info">Enviar formulário</button>

A CSS para o HTML acima poderia ser…

.btn {
    /** Estilização comum a todos o botões */
}
.btn-info {
    /** Estilização específica para os botões do tipo "info" */
}

Outro ponto interessante no caso do botões são os estados hover (sobre), focus(focado) e active(ativo). Podemos definir estilização para cada um dos estados com a auda das pseudoclasses que recebem o mesmo nome:

.btn-info:hover, .btn-info:focus, .btn-info:acitive {
    /** Estilização para todos os 3 estados do botão info*/
}

O nosso exemplo é bastante simplista, porém dá um a idéia geral de como seu código CSS pode ser inteligente.