Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador
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-

Desenvolvido por D'Leandro™ | DB.org
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 » ƒαѕт ϟ

avatar
Membro
Gostei parabens , !
Ver perfil do usuário

#3
 Master Publicitario

avatar
Membro
Muito bem mano, vou testar agora mesmo '-'
Ver perfil do usuário

#4
 Bookmarlucas654

avatar
Membro
'-' Isso fica em todos os botões?
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
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
Ver perfil do usuário

#6
 gui8920

avatar
Membro
Vamos ver se o código é tão bom assim...
Ver perfil do usuário

#7
 Diskete

avatar
Membro
Bacana, gostei !
Vou testá-lo :)

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#8
 ~[B]art

avatar
Membro
Ver perfil do usuário

#9
 'Fusion

avatar
Membro
gostei mt legal vlw's

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#10
 Vic

avatar
Membro
Espero que funcione. Será extremamente útil
Ver perfil do usuário

#11
 'Fusion

avatar
Membro
Espero que funcione no meu phpbb3 tbm

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#12
 Vic

avatar
Membro
Bom code \o\
Ver perfil do usuário

#13
 D'Leandro™

avatar
Fundador
  • Tutorial atualizado 10.12.2013

Foi modificado o código principal e foi colocada a demonstração dos botões funcionando!
Ver perfil do usuário

#14
 GyGu

avatar
Membro
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
Ver perfil do usuário

#15
 D'Leandro™

avatar
Fundador
Sim, mas se retirar o efeito das bolinhas não fará sentido. Os botões serão apenas botões normais e sem vida.
Ver perfil do usuário

#16
 GyGu

avatar
Membro
Mas sendo assim vai dar ao mesmo no final, há sempre imagens a ideia é ter coisas com menos imagens possiveis no fórum
Ver perfil do usuário

#17
 Mr.GamingPT

avatar
Membro
oi
Ver perfil do usuário

#18
 fascicularia

avatar
Membro
OBRIGADO
Ver perfil do usuário

#19
 sivastar

avatar
Membro
Fantastic tutorial
Ver perfil do usuário

#20
 fascicularia

avatar
Membro
thanks
Ver perfil do usuário

#21
 heitorsimonetti

avatar
Membro
Adoreiiiiiii
Ver perfil do usuário

#22
 Teste123

avatar
Membro
Gostei
Ver perfil do usuário

#23
 Conteúdo patrocinado