Efeito nos botões

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Efeito nos botões

Mensagem por SplaSh em 23/05/13, 10:21 am

Qual é minha questão:
Vi neste fórum: http://br-adventurestreet.forumeiros.com/forum uns efeitos que tem quando passamos o mouse em cima de um botão e queria saber como fazer este efeito.

Imagem do efeito: 



Endereço do meu fórum:
http://forumbrasilmegalife.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por @Profile em 23/05/13, 05:16 pm, editado 1 vez(es)
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por inFows em 23/05/13, 10:27 am

Olá,

Asçenda

Painel de Controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: " Aba " Folha de Estilo CSS.

classe:hover {
background-image: url(ENDERECO_DA_IMAGEM_MOUSE_OVER);
padding: ALTURApx LARGURApx;
}
classe:hover {
background-image: url(ENDERECO_DA_IMAGEM_MOUSE_OVER);
padding: ALTURApx LARGURApx;
}

Nos campos altura e largura deverá colocar metada da altura e metade da largura da imagem que pretende colocar, agora teremos que ver qual é a classe para cada botão. Onde tem classe em laranja mude para isso:

#i_icon_mini_index - Início
#i_icon_mini_portal - Portal
#i_icon_mini_calendar - Calendário
#i_icon_mini_faq - FAQ
#i_icon_mini_search - Buscar
#i_icon_mini_members - Membros
#i_icon_mini_groups - Grupos
#i_icon_mini_profile - Perfil
#i_icon_mini_message - Sem novas MPs
#i_icon_mini_new_message - Novas MPs
#i_icon_mini_login - Login
#i_icon_mini_logout - Logout

Até mais.

inFows
Nível 9

Masculino
Inscrito dia : 20/04/2013
Mensagens : 217
Pontos Ativos : 315

Ver perfil do usuário

Resolvido Re: Efeito nos botões

Mensagem por MateusA em 23/05/13, 10:28 am

Olá!

Aceda em:<br />
Painel de Controle Seta Visualização Seta Imagens & Cores Seta Cores Seta Folha de Estilo CSS

O codigo e esse:<br />
Código:
.button2:hover{border:1px solid #fa0505}
.button:hover{border:1px solid #fa0505}
.inputbox:hover{border:1px solid #fa0505}.inputbox:focus{border:1px solid #fa0505;color:#1a1814}.button1:hover{border:1px solid #fa0505}
Valide.


Até mais.

avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 10:43 am

Não funcionou.
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por inFows em 23/05/13, 10:45 am

Subistitua o codigo da folha de css por este.

Código:
#pun-head #pun-navlinks ul li a.mainmenu:hover{text-decoration:none;background-color:#737373;padding:3px;color:white;-moz-border-radius:10px;-webkit-border-radius:10px;border:2px solid dodgerBlue}#pun-head #pun-navlinks ul li a.mainmenu:hover img{margin-left:0px;margin-right:0px}

Valide. Resulto ?

inFows
Nível 9

Masculino
Inscrito dia : 20/04/2013
Mensagens : 217
Pontos Ativos : 315

Ver perfil do usuário

Resolvido Re: Efeito nos botões

Mensagem por MateusA em 23/05/13, 10:46 am

Olá!

Código:
a.mainmenu:hover {
border: 1px solid blue;
}

Seta Você quer que esse efeito fique no menu de navegação certo ?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 10:49 am

Não, eu quero em todos os botões do fórum.
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por MateusA em 23/05/13, 11:02 am

Olá!

Aceda em:<br />
Painel de Controle Seta Visualização Seta Imagens & Cores Seta Cores Seta Folha de Estilo CSS

O codigo e esse:<br />
Código:
        a.button2, body:last-child a.button1, button.button2, input.button1, input.button2 :hover {
        border: 2px solid blue;
        }
Valide.


Até mais.

avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 11:34 am

Ainda não obtive o efeito que eu quero.
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por MateusA em 23/05/13, 11:40 am

Olá fui em seu forum e o efeito está a funcionar perfeitamente,oque está faltando?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 11:49 am

Pois em meu PC o mesmo não está a funcionar.
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por Gaaratsu em 23/05/13, 12:01 pm

Saudações senhor!

Substitua os códigos passados neste tópico por este outro código CSS:
Código:
#main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{border: 1px solid #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 2px 2px 0px #afafaf; -webkit-box-shadow: 2px 2px 0px #afafaf}

Valide!

Atenciosamente! Piscada
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 02:18 pm

Este ficou com um efeito 3D, mas não é o que eu quero.
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Resolvido Re: Efeito nos botões

Mensagem por Gaaratsu em 23/05/13, 02:34 pm

Saudações novamente senhor!

Substitua o código anterior por este:
Código:
#main-content a.cgu-buttons,button.button2,input.button1,input.button2,input.liteoption,input.mainoption{-moz-border-radius:3px;-webkit-border-radius:3px;background:#f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);border:solid 1px #DDD;border-radius:3px;padding:2px}#main-content a.cgu-buttons:hover,button.button2:hover,input.button1:hover,input.button2:hover,input.liteoption:hover,input.mainoption:hover{background-position:0 100%;border:1px solid #86B125;color:#89B125}

Atenciosamente! Piscada


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Efeito nos botões

Mensagem por SplaSh em 23/05/13, 05:10 pm

Perfeito, obrigado!
avatar

SplaSh
Usuário avançado

Masculino
Inscrito dia : 07/05/2012
Mensagens : 315
Pontos Ativos : 568

Ver perfil do usuário http://www.brasilrevolutionadventure.com.br/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum