Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Efeito nos botões

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Efeito nos botões

Mensagem por SplaSh 23.05.13 14:21

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 21:16, editado 1 vez(es)
SplaSh
SplaSh
****

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por inFows 23.05.13 14:27

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.
avatar
inFows
****

Membro desde : 20/04/2013
Mensagens : 217
Pontos : 315

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por MateusA 23.05.13 14:28

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.

MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 14:43

Não funcionou.
SplaSh
SplaSh
****

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por inFows 23.05.13 14:45

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 ?
avatar
inFows
****

Membro desde : 20/04/2013
Mensagens : 217
Pontos : 315

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por MateusA 23.05.13 14:46

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.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 14:49

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

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por MateusA 23.05.13 15:02

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.

MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 15:34

Ainda não obtive o efeito que eu quero.
SplaSh
SplaSh
****

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por MateusA 23.05.13 15:40

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

Até mais.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 15:49

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

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por Konai 23.05.13 16:01

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
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 18:18

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

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por Konai 23.05.13 18:34

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
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões

Mensagem por SplaSh 23.05.13 21:10

Perfeito, obrigado!
SplaSh
SplaSh
****

Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568

http://www.brasilrevolutionadventure.com.br/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

 
Permissões neste sub-fórum
Não podes responder a tópicos