Adaptar botão

3 participantes

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

Tópico resolvido Adaptar botão

Mensagem por Josh 19.09.12 19:57

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 20:42, editado 1 vez(es)
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adaptar botão

Mensagem por Ace 20.09.12 19:24

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

Mensagem por Josh 20.09.12 19:55

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

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adaptar botão

Mensagem por Ace 20.09.12 19:59

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

Membro Entusiasta

Tópico resolvido Re: Adaptar botão

Mensagem por Luciano98 20.09.12 20:06

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

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar botão

Mensagem por Josh 20.09.12 20:14

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

Abraços!
Muito feliz
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adaptar botão

Mensagem por Luciano98 20.09.12 20:21

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

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar botão

Mensagem por Josh 20.09.12 20:42

Agora sim!
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

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