Efeito nos botões como o fdf

4 participantes

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

Tópico resolvido Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 14:54

Qual é minha questão:
Vejam a print, queria esse efeito dos botões igual se for possível.

Efeito nos botões como o fdf 1_bmp26

Endereço do meu fórum:
http://www.master-publicitario.forumeiros.com

Versão do fórum:
PHPBB3
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Ace 06.12.12 14:56

Olá,

Utilize o seguinte CSS:

Código:
 #main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
border: 1px solid #DDD;
border-radius: 2px;
margin: 0px;
padding: 3px 7px;
}
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: 3px;
padding: 3px 5px;
transition-duration: .8s;
moz-transition-duration: .8s;
-webkit-transition-duration: .8s;
-o-transition-duration: .8s;
}
#main-content a.cgu-buttons:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background: gray;
color: #F4F5F4;
border: 1px solid gray;
}

Atenciosamente!
Ace

Ace
Membro Entusiasta
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11607

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:12

Não resultou
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 15:20

Olá!

Utilize esse código CSS:
Código:
#main-content a.cgu-buttons{padding:3px 5px}#main-content a.cgu-buttons,button.button2,input.button1,input.button2{background-image:url();border:1px solid #DDD;border-radius:2px;color:#666;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px;text-align:center;text-decoration:none}a.button1:hover,a.button2:hover,button.button2:hover,input.button1:hover,input.button2:hover{background-color:#999;background-image:url();border:1px solid #999;border-radius:2px;color:#fff;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px}
Melhores cumprimentos.
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:26

Ficou parece bugado pode conferir:

www.master-publicitario.forumeiros.com/forum
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 15:33

Visitei seu fórum e não encontrei nenhum erro. Poderia me mostrar um PrintScreen?

Melhores cumprimentos!
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:35

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 15:36

Certo, substitua por esse:
Código:
#main-content a.cgu-buttons{padding:3px 5px}#main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{background-image:url();border:1px solid #DDD;border-radius:2px;color:#666;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px;text-align:center;text-decoration:none}a.button1:hover,a.button2:hover,button.button2:hover,input.button1:hover,input.button2:hover{background-color:#999;background-image:url();border:1px solid #999;border-radius:2px;color:#fff;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px!important}
Melhores cumprimentos.
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:38

Continua igual
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 15:42

Certo, substitua por esse:
Código:
#main-content a.cgu-buttons{padding:3px 5px}#main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{background-image:url();border:1px solid #DDD;border-radius:2px;color:#666;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px;text-align:center;text-decoration:none}#main-content a.cgu-buttons:hover,input.button1:hover,input.button2:hover,a.button2:hover,button.button2:hover{background-color:#999;background-image:url();border:1px solid #999;border-radius:2px;color:#fff;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px!important}
Melhores cumprimentos.
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:45

Continua igual
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por ZombieW 06.12.12 15:48

Insira no seu CSS:

Código:
/* Botoes Personalizados */
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
border: 1px solid #DDD;
border-radius: 2px;
margin: 0px;
padding: 3px 7px;
}
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: 3px;
padding: 3px 5px;
transition-duration: .8s;
moz-transition-duration: .8s;
-webkit-transition-duration: .8s;
-o-transition-duration: .8s;
}
#main-content a.cgu-buttons:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background: gray;
color: #F4F5F4;
border: 1px solid gray;
}
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:51

Quando coloco o Mouse me cima o Texto fica em Azul e queria em Branco:

https://i.servimg.com/u/f43/16/43/60/45/1_bmp28.jpg
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 15:52

Há vários outros CSS que impede a entrada do desejado, procure por esse em sua folha de estilos:
Código:
#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url(http://i66.servimg.com/u/f66/13/46/75/82/bbg11.png);
color: black;
padding: 3px;}
E substitua por:
Código:
#text_editor_controls,#text_editor_controls,#text_editor_controls{background-image: url(http://i66.servimg.com/u/f66/13/46/75/82/bbg11.png); color: black;padding: 3px}
Seta Procure e remova esse:
Código:
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
color: #048ebb;}
Seta Faça o mesmo com esse:
Código:
button.button2, input.button2{
background: #f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 2px;}
E mantenha o código que passei anteriormente.

Melhores cumprimentos!
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 15:56

Já resultou só que o Quadrado a volta está igual queria colocar como está a FdF
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 16:01

Olá!

Isso porque não realizaste o seguinte.
Today escreveu:Seta Procure e remova esse:
Código:
button.button2, input.button2{
background: #f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 2px;}
E mantenha o código que passei anteriormente.
Melhores cumprimentos.
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 16:04

Coloquei mas não resultou
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado 06.12.12 16:05

Mais é para remover.

Melhores cumprimentos!
Consolado

Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. 06.12.12 16:11

Resolvido
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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