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:

view source

print?

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

Agora o CSS:

view source

print?

01.a.bottom{

02.margin: 10px auto;

03.text-decoration: none;

04.color: #000;

05.padding: 5px 10px;

06.border-radius: 5px;

07.-webkit-border-radius: 5px;

08.-moz-border-radius: 5px;

09.background: #ddd;

10.color: #111;

11.font-family: calibri;

12.text-transform: uppercase;

13.font-weight: bold;

14.}

15. 

16.a.bottom:hover{

17.background: #f90;

18.color: #fff;

19.}

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:

view source

print?

01.<div class="post-menu">

02.    <ul>

03.        <li><a href="#">Home</a></li>

04.        <li><a href="#">Link 1</a></li>

05.        <li><a href="#">Link 2</a></li>

06.        <li><a href="#">Link 3</a></li>

07.        <li><a href="#">Link 4</a></li>

08.    </ul>

09.</div><!-- .post-menu -->

Agora, abaixo o CSS.

view source

print?

01..post-menu{

02.width: 98%;

03.height: 45px;

04.border-radius: 10px;

05.-webkit-border-radius: 10px;

06.moz-border-radius: 10px;

07.margin: 0 auto;

08.}

09. 

10..post-menu ul li{

11.display: inline;

12.}

13. 

14..post-menu ul li a{

15.text-decoration: none;

16.color: #111;

17.font-family: calibri;

18.text-transform: uppercase;

19.float: left;

20.padding: 5px 10px;

21.background: #dfdfdf;

22.margin-top: 7.5px;

23.margin-right: 5px;

24.border-radius: 5px;

25.-webkit-border-radius: 15px;

26.moz-border-radius: 5px;

27.font-weight: bold;

28.}

29. 

30..post-menu ul li a:hover{

31.background: #abcdef;

32.color: #fff;

33.}

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