Este tutorial funciona em todas as versões.



1º Passo

Devemos ir até o CSS.

Painel de Controle - > Visualização - > Imagens e Cores - > Cores - > Aba " Folha de estilo CSS "

2º Passo

Agora que já estamos no CSS, devemos adicionar o código abaixo:

Código:


/* Botões em estilo " hover " - azuis - por Premotheus */
button,button.button2,input.button2,input[type="button"],input[type="file"],input[type="reset"],input[type="submit"]
{-moz-border-radius:3px;-moz-box-shadow:inset 0 0 1px 1px #f6f6f6;-webkit-border-radius:3px;-webkit-box-shadow:inset 0 0 1px 1px #f6f6f6;background:#e3e3e3;border:1px solid #bbb;border-radius:3px;box-shadow:inset 0 0 1px 1px #f6f6f6;color:#333;cursor:pointer;font-family:"helvetica neue",helvetica,arial,sans-serif;font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;line-height:1;padding:4px .5em!important;text-align:center;text-shadow:0 1px 0 #fff}

button,button.button2,input.button2,input[type="button"],input[type="file"],input[type="reset"],input[type="submit"]
{color:#F1F1F1;}

button:hover,button.button2:hover,input.button2:hover,input[type="button"]:hover,input[type="file"]:hover,input[type="reset"]:hover,input[type="submit"]:hover
{margin-right: 3px !important;font-size: 12px !important}

button,button.button2,input.button2,input[type="button"],input[type="file"],input[type="reset"],input[type="submit"]
{    color: #333 !important;    border: solid 1px #B6B6B6 !important;    text-shadow: 0px 1px #F6F6F6 !important;    background-color:#E6E6E6;    background:-moz-linear-gradient(#F3F3F3,#E6E6E6);    background-image: -webkit-linear-gradient(#F3F3F3,#E6E6E6);    box-shadow: 0px 1px #EFEFEF !important;    -moz-box-shadow: 0px 1px #EFEFEF !important;    -webkit-box-shadow: 0px 1px #EFEFEF !important;}

button:hover,button.button2:hover,input.button2:hover,input[type="button"]:hover,input[type="file"]:hover,input[type="reset"]:hover,input[type="submit"]:hover
{    color: white !important;    border: solid 1px #3390CA !important;    background-color: #58B0E7;    background:-moz-linear-gradient(#B4F6FF,#58B0E7);    background-image: -webkit-linear-gradient(#B4F6FF,#58B0E7);    text-shadow: 0px 1px #388DBE !important;    box-shadow: 0px 1px #E7E7E7 !important;-moz-box-shadow: 0px 1px #E7E7E7 !important;-webkit-box-shadow: 0px 1px #E7E7E7 !important;} 

button,button.button2,input.button2,input[type="button"],input[type="file"],input[type="reset"],input[type="submit"]
{vertical-align: top !important;}


Vocês poderam modificar a segunda parte em hover, por ser a mais fácil.

Visualização final

Parabéns pelo tópico, e pelo 1000 tópico =)

Muito bom, parabéns !

Vou tentar criar um outro código parecido com este, mas com um efeito diferente :)
Mais tarde eu irei postar.

Parabens pelo topico, poderia me dizer os botoes que ficaram em estilo hover e o de pre-visualizar e enviar?

São todos os botões do forum.

Muito bom !
Mudou muito o visual :D

legal gostei bastante

Preciso comentar de novo, estranho O.o