Adaptar botão

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

Resolvido Adaptar botão

Mensagem por Josh em 19/09/12, 03:57 pm

Qual é minha questão:
Boas!

Editei um botão, mais queria adaptá-lo como botão das páginas do meu fórum; http://x-geek.ativoforum.com/h18-

CSS:
Código:

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
color: white;
background-color: #F89406;
}
.btn:hover {
color: #333;
text-decoration: none;
background-color: #E6E6E6;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333;
background-color: #E6E6E6;
}
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
.btn {
font-size: 13px;
font-weight: bold;
}
.btn-warning {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #FAA732;
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FBB450),to(#F89406));
background-image: -webkit-linear-gradient(top,#FBB450,#F89406);
background-image: -o-linear-gradient(top,#FBB450,#F89406);
background-image: linear-gradient(to bottom,#FBB450,#F89406);
background-image: -moz-linear-gradient(top,#FBB450,#F89406);
background-repeat: repeat-x;
border-color: #F89406 #F89406 #AD6704;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn {
border-color: #C5C5C5;
}
.btn {
display: inline-block;
padding: 4px 14px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
border: 1px solid #BBB;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #A2A2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
}
Me ajudem.

Até mais!

Links e imagens do meu problema:
Http://x-geek.ativoforum.com/h18-preview

Endereço do meu fórum:
http://x-geek.ativoforum.com/

Versão do meu fórum:
PHPBB3


Última edição por Josh em 20/09/12, 04:42 pm, editado 1 vez(es)
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Adaptar botão

Mensagem por Ace em 20/09/12, 03:24 pm

Olá Josh, bem? Piscada

Eu não entendi sua dúvida amigo. Quer personalizar botões de seu fórum através de CSS para que fiquem iguais ao da imagem?

Cordialmente! Piscada
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: Adaptar botão

Mensagem por Josh em 20/09/12, 03:55 pm

Eu configurei o botão que está na página HTML (CSS acima), só que desde o começo eu sabia que não teriam as classes do botão atual do meu fórum, e agora quero adaptá-lo.
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Adaptar botão

Mensagem por Ace em 20/09/12, 03:59 pm

Olá,

Para mim seu texto continuou extremamente vago. Preciso que você me de detalhes do que quer que façamos em sua questão.

Cordialmente.
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: Adaptar botão

Mensagem por Luciano98 em 20/09/12, 04:06 pm

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Código:
#main-content a.cgu-buttons,input.button1,input.button2{-webkit-appearance:none;-webkit-border-image:none;-webkit-box-align:center;-webkit-box-shadow:rgba(255,255,255,0.2) 0px 1px 0px 0px inset,rgba(0,0,0,0.0470588) 0px 1px 2px 0px;-webkit-rtl-ordering:logical;-webkit-user-select:text;background-color:whiteSmoke;background-image:-webkit-linear-gradient(top,white,#E6E6E6);background-repeat:repeat-x;border:1px solid rgba(0,0,0,0.0980392);border-bottom:1px solid #A2A2A2;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:rgba(255,255,255,0.2) 0px 1px 0px 0px inset,rgba(0,0,0,0.0470588) 0px 1px 2px 0px;box-sizing:border-box;color:#333;cursor:pointer;display:inline-block;font-size:14px;font-weight:bold;height:30px;letter-spacing:normal;line-height:20px;margin-bottom:0px;margin-left:2px;margin-right:2px;margin-top:2px;padding-bottom:4px;padding-left:14px;padding-right:14px;padding-top:4px;text-align:center;text-indent:0px;text-shadow:rgba(255,255,255,0.74902) 0px 1px 1px;text-transform:none;vertical-align:middle;white-space:pre}#main-content a.cgu-buttons:hover,input.button1:hover,input.button2:hover{color:#333;text-decoration:none;background-color:#E6E6E6;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}

Valide.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

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

Resolvido Re: Adaptar botão

Mensagem por Josh em 20/09/12, 04:14 pm

Isso aí, Luciano! Perfeito, mais certos botões não corresponderam:
http://i36.servimg.com/u/f36/17/36/33/20/ew10.png

Abraços!
Muito feliz
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Adaptar botão

Mensagem por Luciano98 em 20/09/12, 04:21 pm

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Código:
#main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{-webkit-appearance:none;-webkit-border-image:none;-webkit-box-align:center;-webkit-box-shadow:rgba(255,255,255,0.2) 0px 1px 0px 0px inset,rgba(0,0,0,0.0470588) 0px 1px 2px 0px;-webkit-rtl-ordering:logical;-webkit-user-select:text;background-color:whiteSmoke;background-image:-webkit-linear-gradient(top,white,#E6E6E6);background-repeat:repeat-x;border:1px solid rgba(0,0,0,0.0980392);border-bottom:1px solid #A2A2A2;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:rgba(255,255,255,0.2) 0px 1px 0px 0px inset,rgba(0,0,0,0.0470588) 0px 1px 2px 0px;box-sizing:border-box;color:#333;cursor:pointer;display:inline-block;font-size:14px;font-weight:bold;height:30px;letter-spacing:normal;line-height:20px;margin-bottom:0px;margin-left:2px;margin-right:2px;margin-top:2px;padding-bottom:4px;padding-left:14px;padding-right:14px;padding-top:4px;text-align:center;text-indent:0px;text-shadow:rgba(255,255,255,0.74902) 0px 1px 1px;text-transform:none;vertical-align:middle;white-space:pre}#main-content a.cgu-buttons:hover,input.button1:hover,input.button2:hover,a.button2:hover,button.button2:hover{color:#333;text-decoration:none;background-color:#E6E6E6;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}

Valide.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

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

Resolvido Re: Adaptar botão

Mensagem por Josh em 20/09/12, 04:42 pm

Agora sim!
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

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