Começando com botões em CSS
Na verdade não iremos trabalhar com botões tag "<input type='button'>" do HTML, mas iremos criar botões a partir de links, que muda de cor quando o mouse passa sobre ele.
Exemplo:
Ir para BotaoWeb Outro botão
Começamos com o CSS:
<style type='text/css'>
a.botao:visited { /*Link visitado*/color: #57CB34;
text-decoration: none;
}
a.botao{ /* A letra 'a' refere-se ao link com a classe botao */
font-weight: bold; /* foont em negrito */
border: 1px solid #57CB34; /* Borda com 1px de espessura e cor em hexedecimal */
text-decoration: none; /* Retira o sublinhado do link */
display: block; /* Para que fique do tamanho determinado */
width: 160px; /* Largura */
color: #57CB34; /* Cor do texto */
}
/* Quando passar o mouse sobre*/
a.botao:hover{ /* Hover ação do mouse */
color: #fff; /* Muda a cor do texto p/ branco */
background: #57CB34; /* Muda a cor do fundo para verde*/
}
</style>
O código acima a princípio parece meio complicado mas é feito somente uma veze e todo link que você criar em seu site com a class botao carregara os atributos.
Agora vamos fazer os links:
<a href='http://www.botaoweb.com/website/' class='botao'>Ir para BotaoWeb </a>
<a href='http://www.botaoweb.com/website/' class='botao'>Outro botão </a>
Pronto!
Agora é só abrir seu notepad jogar os dois códigos dentro e salvar como index.html
Espero ter ajudado ;-)
