TUTORIALBotões em CSS para tópicos
E ae galera blz? Quer colocar botões legais nos seus tópicos? Agora você pode! kkkk vamos lá, agora é só usar a sua criatividade e se divertir com estes botões bem legais.

Funcionalidade: Todas as versões. (Incluindo blog)

Para começar vamos colocar um código CSS!

Código:

/* Botões em CSS para Tópico */
.button {
   font: 15px Calibri, Arial, sans-serif;
   text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
   text-decoration: none !important;
   white-space: nowrap;
   display: inline-block;
   vertical-align: baseline;
   position: relative;
   cursor: pointer;
   padding: 10px 20px;
   background-repeat: no-repeat;
   background-position: bottom left;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png');

   background-position: bottom left, top right, 0 0, 0 0;
   background-clip: border-box;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   -moz-box-shadow: 0 0 1px #fff inset;
   -webkit-box-shadow: 0 0 1px #fff inset;
   box-shadow: 0 0 1px #fff inset;
   -webkit-transition: background-position 1s;
   -moz-transition: background-position 1s;
   transition: background-position 1s;
}
.button:hover {
   background-position: top left;
   background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {
   bottom: -1px;
}
.button.big {
   font-size: 30px;
}
.button.medium {
   font-size: 18px;
}
.button.small {
   font-size: 13px;
}
.button.rounded {
   -moz-border-radius: 4em;
   -webkit-border-radius: 4em;
   border-radius: 4em;
}
.blue.button {
   color: #0f4b6d !important;
   border: 1px solid #84acc3 !important;
   background-color: #48b5f2;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover {
   background-color: #63c7fe;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
.green.button {
   color: #345903 !important;
   border: 1px solid #96a37b !important;
   background-color: #79be1e;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover {
   background-color: #89d228;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
.orange.button {
   color: #693e0a !important;
   border: 1px solid #bea280 !important;
   background-color: #e38d27;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover {
   background-color: #ec9732;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button {
   color: #525252 !important;
   border: 1px solid #a5a5a5 !important;
   background-color: #a9adb1;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover {
   background-color: #b6bbc0;
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
   background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
/*---/ Creditos: 2012 © Staffer Group BR™ /---*/
/*---/  http://staffergroupbr.stuning.net /---*/

Colocou o CSS? Agora vamos aplicar o código dentro de um tópico!
1. HTML para o botão grande (Escolha qualquer um de acordo com a cor do botão)

Código:

<a href="#" class="button big blue">TEXTO AQUI</a>
<a href="#" class="button big green">TEXTO AQUI</a>
<a href="#" class="button big orange">TEXTO AQUI</a>
<a href="#" class="button big gray">TEXTO AQUI</a>

2. HTML para o botão médio (Escolha qualquer um de acordo com a cor do botão)

Código:

<a href="#" class="button blue medium">TEXTO AQUI</a>
<a href="#" class="button green medium">TEXTO AQUI</a>
<a href="#" class="button orange medium">TEXTO AQUI</a>
<a href="#" class="button gray medium">TEXTO AQUI</a>

3. HTML para o botão pequeno (Escolha qualquer um de acordo com a cor do botão)

Código:

<a href="#" class="button small blue">TEXT AQUI</a>
<a href="#" class="button small green">TEXT AQUI</a>
<a href="#" class="button small orange">TEXT AQUI</a>
<a href="#" class="button small gray">TEXT AQUI</a>

4. HTML para o botão oval (Escolha qualquer um de acordo com a cor do botão)

Código:

<a href="#" class="button small blue rounded">TEXTO AQUI</a>
<a href="#" class="button small green rounded">TEXTO AQUI</a>
<a href="#" class="button small orange rounded">TEXTO AQUI</a>
<a href="#" class="button small gray rounded">TEXTO AQUI</a>

Procure por: #.
Substitua pelo link do botão.

Procure por: TEXTO AQUI.
Substitua pela palavra do botão.

Agora basta copiar a linha que você quer e colar no tópico, vou deixar uma demonstração de todos os botões no Métall Testes.
Demonstração: http://metalltestes.virtuaboard.com/t17-

Gostei parabens , !

Muito bem mano, vou testar agora mesmo '-'

'-' Isso fica em todos os botões?

Não: Apenas quando voce coloca o código correspondente ao botão.

Código:

<a href="#" class="button small gray rounded">TEXTO AQUI</a>

TEXTO AQUI

Vamos ver se o código é tão bom assim...

Bacana, gostei !
Vou testá-lo :)

gostei mt legal vlw's

Espero que funcione. Será extremamente útil

Espero que funcione no meu phpbb3 tbm

Bom code \o\

• Tutorial atualizado 10.12.2013

Foi modificado o código principal e foi colocada a demonstração dos botões funcionando!

Muito bem D'Leandro™ eu apoio tudo o que é projecto para substituir imagens por CSS/HTLM espero ver mais tópicos destes.

Mas tenho um dúvida mesmo assim no CSS ainda tem links de imagens eles podem ser retirados? Eu sei que assim não irá ter aquele efeito das bolinhas

Sim, mas se retirar o efeito das bolinhas não fará sentido. Os botões serão apenas botões normais e sem vida.

Mas sendo assim vai dar ao mesmo no final, há sempre imagens a ideia é ter coisas com menos imagens possiveis no fórum

oi

OBRIGADO

Fantastic tutorial

thanks

Adoreiiiiiii

Gostei