Efeito nos botões como o fdf

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

Resolvido Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 12:54 pm

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



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

Versão do fórum:
PHPBB3

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Ace em 06/12/12, 12:56 pm

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!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:12 pm

Não resultou

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 01:20 pm

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

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:26 pm

Ficou parece bugado pode conferir:

www.master-publicitario.forumeiros.com/forum

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 01:33 pm

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

Melhores cumprimentos!
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:35 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 01:36 pm

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

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:38 pm

Continua igual

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 01:42 pm

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

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:45 pm

Continua igual

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por ZombieW em 06/12/12, 01:48 pm

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;
}
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1274
Pontos Ativos : 1799

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:51 pm

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

http://i43.servimg.com/u/f43/16/43/60/45/1_bmp28.jpg

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 01:52 pm

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!
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 01:56 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 02:01 pm

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

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 02:04 pm

Coloquei mas não resultou

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito nos botões como o fdf

Mensagem por Consolado em 06/12/12, 02:05 pm

Mais é para remover.

Melhores cumprimentos!
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Efeito nos botões como o fdf

Mensagem por IsmaelS. em 06/12/12, 02:11 pm

Resolvido

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

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