InícioEfeito 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
Página 1 de 1 • Compartilhe
Efeito nos botões
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
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- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por inFows 23.05.13 14:27
Olá,
Asçenda
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:
Até mais.
Asçenda
Painel de ControleVisualização
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- ****
- Membro desde : 20/04/2013
Mensagens : 217
Pontos : 315
Re: Efeito nos botões
por MateusA 23.05.13 14:28
Olá!
Aceda em:<br />
O codigo e esse:<br />
Até mais.
Aceda em:<br />
Painel de ControleVisualização
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}
Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por inFows 23.05.13 14:45
Subistitua o codigo da folha de css por este.
Valide. Resulto ?
- 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- ****
- Membro desde : 20/04/2013
Mensagens : 217
Pontos : 315
Re: Efeito nos botões
por MateusA 23.05.13 14:46
Olá!
Você quer que esse efeito fique no menu de navegação certo ?
Até mais.
- Código:
a.mainmenu:hover {
border: 1px solid blue;
}
Você quer que esse efeito fique no menu de navegação certo ?Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por MateusA 23.05.13 15:02
Olá!
Aceda em:<br />
O codigo e esse:<br />
Até mais.
Aceda em:<br />
Painel de Controle
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;
}
Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por MateusA 23.05.13 15:40
Olá fui em seu forum e o efeito está a funcionar perfeitamente,oque está faltando?
Até mais.
Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por Konai 23.05.13 16:01
Saudações senhor!
Substitua os códigos passados neste tópico por este outro código CSS:
Valide!
Atenciosamente!
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!
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
Re: Efeito nos botões
por SplaSh 23.05.13 18:18
Este ficou com um efeito 3D, mas não é o que eu quero.
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Re: Efeito nos botões
por Konai 23.05.13 18:34
Saudações novamente senhor!
Substitua o código anterior por este:
Atenciosamente!
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!
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
SplaSh- ****
- Membro desde : 07/05/2012
Mensagens : 315
Pontos : 568 -
Tópicos semelhantesFó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
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
