Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Diskete

avatar
Membro
Este tutorial funciona em todas as versões.


- > Tutorial < -

- > Novos botões em estilo hover < -

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


Desenvolvido por Diskete | Premotheus
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 D'Leandro™

avatar
Fundador
Aceito: Movido para o local correspondente.



Parabens: Este foi o milésimo tópico criado neste forum!
Meta: 1000 Tópicos antes de 2013!
Status: Concluida.

Ver perfil do usuário

#3
 Bookmarlucas654

avatar
Membro
Parabéns pelo tópico, e pelo 1000 tópico =)
Ver perfil do usuário

#4
 Master Publicitario

avatar
Membro
Muito bom, parabéns !
Ver perfil do usuário

#5
 Diskete

avatar
Membro
Vou tentar criar um outro código parecido com este, mas com um efeito diferente :)
Mais tarde eu irei postar.
Ver perfil do usuário

#6
 Jose Hamizaki

avatar
Membro
Parabens pelo topico, poderia me dizer os botoes que ficaram em estilo hover e o de pre-visualizar e enviar?
Ver perfil do usuário

#7
 D'Leandro™

avatar
Fundador
São todos os botões do forum.
Ver perfil do usuário

#8
 DarkDoki

avatar
Membro
Muito bom !
Mudou muito o visual :D

Assinatura:

Make My Dreams Come True ♪

Ver perfil do usuário

#9
 'Fusion

avatar
Membro
legal gostei bastante

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#10
 Bookmarlucas654

avatar
Membro
Preciso comentar de novo, estranho O.o
Ver perfil do usuário

#11
 Conteúdo patrocinado