Como criar botões com HTML e CSS

E aí pessoal, tudo certo? Voltando com mais um tutorial para vocês. Hoje aprenderemos a criar botões apenas com HTML e CSS. Se não me engano, já até comentei isso em outro post, mas não dei muita atenção pois não era o foco naquele momento.

A logística da aula de hoje será: aprenderemos a criar o botão e depois faremos um menu horizontal com o que aprendermos neste momento. Simples! Por falta de opção no momento, estarei usando o Bloco de Notas do Windows (sim, eu sou ninja). Então abra seu editor de código favorito e mãos à obra.

O modelo que seguiremos é este abaixo

botão

Mas a pergunta: Por que usar este procedimento e não simplesmente criar um botão no Fireworks, por exemplo, e colocar a imagem? Não seria muito mais prático? 

Em parte isso é verdade, mas como diz minha mãe: O barato pode acabar saindo caro. O que quero dizer com isso é que se você infestar seu site de imagens, além de ficar algo não muito natural, o site ficará extremamente pesado. Ou seja, quanto menos imagens você utilizar, melhor. Isso sem contar o conhecimento adquirido quando se utilizar essa técnica.

Abaixo o código do botão acima. Não há nada já que não tenhamos visto. Primeiro o HTML:

<a href="#" class="bottom">Botão</a>

Agora o CSS:

a.bottom{
margin: 10px auto;
text-decoration: none;
color: #000;
padding: 5px 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #ddd;
color: #111;
font-family: calibri;
text-transform: uppercase;
font-weight: bold;
}

a.bottom:hover{
background: #f90;
color: #fff;
}

O que gostaria de falar desse código é a pseudo-class :hover. Este é o evento no CSS que indica "ao passar o mouse", ou seja, quando posicionarmos o cursor em cima do elemento (no caso) a.bottom ele terá um background laranja e o texto terá a cor branca. As configurações que não forem citadas no :hover não terão alteração em relação ao elemento no estado comum que no caso são as configurações feitas no a.bottom. Isso significa que a fonte continuará sendo a Calibri, sendo escrita em uppercase (caixa alta ou "Caps Lock") e negrito. As outras tags CSS são muito intuitivas e não necessitam de muita explicação a respeito.

Agora vamos ao nosso menu horizontal criado com botões. Só para constar, este não é o meu estilo de menu favorito, mas nunca se sabe quando será necessário utilizar-se deste tipo de layout.

• Home
• Link 1
• Link 2
• Link 3
• Link 4

Abaixo o código que utilizei. Primeiro o HTML:

<div class="post-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div><!-- .post-menu -->

Agora, abaixo o CSS.

.post-menu{
width: 98%;
height: 45px;
border-radius: 10px;
-webkit-border-radius: 10px;
moz-border-radius: 10px;
margin: 0 auto;
}

.post-menu ul li{
display: inline;
}

.post-menu ul li a{
text-decoration: none;
color: #111;
font-family: calibri;
text-transform: uppercase;
float: left;
padding: 5px 10px;
background: #dfdfdf;
margin-top: 7.5px;
margin-right: 5px;
border-radius: 5px;
-webkit-border-radius: 15px;
moz-border-radius: 5px;
font-weight: bold;
}

.post-menu ul li a:hover{
background: #abcdef;
color: #fff;
}

Bom, pessoal... É isso. Agora, deleite-se, mexa nas configurações para saber onde cada tag CSS está mexendo e, acima de tudo, DIVIRTA-SE!