Adaptar botão

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

Olá Josh, bem?

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!

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.

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.

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e cores Cores 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.

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!

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e cores Cores 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.

Agora sim!