Efeito nos botões como o fdf

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

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!

Não resultou

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.

Ficou parece bugado pode conferir:

www.master-publicitario.forumeiros.com/forum

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

Melhores cumprimentos!

Aqui está:

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

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.

Continua igual

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.

Continua igual

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

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

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}

Procure e remova esse:

Código:

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
color: #048ebb;}

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!

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

Olá!

Isso porque não realizaste o seguinte.

Today escreveu: 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.

Coloquei mas não resultou

Mais é para remover.

Melhores cumprimentos!

Resolvido