Criando botões personalizados com Twitter Bootstrap Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 4 anos, 5 meses, 2 semanas, 4 dias atrás.

Hoje em dia, com frameworks bem desenvolvidos e documentados, como Twitter Bootstrap, e ainda aliados as novidades do CSS3 e sites como ColorZilla, criar recursos de design avançado sem o uso de imagens se torna algo tão prático e prazeroso que ler este primeiro parágrafo foi mais demorado, pode acreditar. Quero mostrar neste artigo como é fácil para você mesmo criar botões belíssimos usando o Twitter Bootstrap (mais bonitos que os nativos na verdade, mas leve em conta que "é tudo uma questão de opinião", salve Chorão!). Só pra saber, vou usar isso no artigo de como criar um template reponsivo com ajax, acesso a histórico de navegação e parallax.

Estruturando seus botões personalizados

Seguindo a estrutura do Twitter Bootstrap, temos duas classes que irão definir nossos botões, uma para a estrutura e outra para a personalização (as cores) propriamente dita. A classe .btn define a estrutura, nela é que fica o css que faz as bordas ficarem arredondadas, a sombra, o alinhamento, as margens internas e externas, se você quiser (e nós queremos), alterar algo "globalmente" será aqui que deveremos alterar. Agora, para personalizar cada botão, transformando-o em único, deveremos usar o padrão .btn-nomedobotao, o próprio bootstrap usa esse padrão de nomenclatura nos 8 modelos que vem junto com o framework, veja aqui. Nesta primeira etapa, quero dar duas ideias de como personalizar a estrutura básica dos botões, para isso eu posso apenas editar a classe .btn ou ir mais longe, e criar uma extensão para o bootstrap, uau!!!! Então vou uma extensão de btn, com sombras e brilhos e um efeito leve quando o mouse estivesse sobre o botão, eu vou chamar de .btn-volume.

.btn.btn-volume{
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 0px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    text-shadow:none;
}
.btn.btn-volume:hover{
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 0px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);
    box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);
}

Só com isso já conseguimos um efeito interessante sem forçar a barra, apenas um leve efeito de relevo mais acentuado, veja: http://jsfiddle.net/26Mpw/40/

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Botão destaque

Agora eu vou dar um exemplo de como criar um botão totalmente personalizado, vou chamar de .btn-destaque, porque gosto dessa palavra, destaque, você pode criar o seu e colocar o nome que quiser.

.btn.btn-destaque {
    border:none;
    border-color:transparent;
    background-color: #E6E7E8;
    *background-color: #E6E7E8;
    background-image: -moz-linear-gradient(top, #FFF, #E6E7E8);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E6E7E8));
    background-image: -webkit-linear-gradient(top, #FFF, #E6E7E8);
    background-image: -o-linear-gradient(top, #FFF, #E6E7E8);
    background-image: linear-gradient(to bottom, #FFF, #E6E7E8);
}
.btn.btn-destaque:hover {
    background-position:top left;
    background-color: #E6E7E8;
    *background-color: #E6E7E8;
    background-image: -moz-linear-gradient(top, #E6E7E8, #D2D3D5);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E6E7E8), to(#D2D3D5));
    background-image: -webkit-linear-gradient(top, #E6E7E8, #D2D3D5);
    background-image: -o-linear-gradient(top, #E6E7E8, #D2D3D5);
    background-image: linear-gradient(to bottom, #E6E7E8, #D2D3D5);
    background-repeat: repeat-x;
}
.btn.btn-destaque.active{
    background-color: #4F81BC !important;
    color:#FFF !important;
    background-image:none;
}

Note que logo de cara já setei border:none; porque o bootstrap tem uma bordinha chata que eu não quero usar. Outro ponto importante é que eu apenas usei  backgrounds e color (além do border none) para criar meu botão, pode parecer complicado a primeira vista, mas tem um truque que vou mostrar daqui a pouco. Veja o exemplo aqui: http://jsfiddle.net/26Mpw/41/ Para quem abriu o link viu como é fácil adaptar para seu site apenas alterando 1 linha no botão .active, no caso, alterei o padrão azul para um laranja, você pode usar a cor que quiser.

Degrades avançados nos seus botões

Recentemente eu descobri o site ColorZilla que oferece uma ferramenta avançada de criar degrades, e ele funciona perfeitamente com o Fireworks e Photoshop, bastando apenas recriar o degrade no editor de imagem usando os mesmos valores de posição e cor. O resultado final é um gradiente cross-browser perfeito para criar seu botão com 137 exemplos (até o momento que escrevi isso) prontos. Para usar é facil:

  1. Acesse o site e escolha um modelo de degrade pronto ou crie o seu.
  2. Copie o CSS gerado e cole na sua folha de estilos dentro de uma classe com o nome  .btn-onomequevocequer (se quiser retirar a bordinha feia use border:none ou então mude para a cor que te agradar).
  3. Chame na sua página como faria com um botão normal do Bootstrap (btn btn-onomequevocequer).

Veja um exemplo aqui: http://jsfiddle.net/26Mpw/42/ Note que para o active usei uma das cores do gradiente e também setei o color para #FFF (branco), o :hover (efeito de mouse sobre o botão) ficou por conta do .btn-volume. É bacana o que você pode fazer em minutos com as ferramentas certas e um pouco de inspiração. Minha dica? Ouse, tente, experimente, erre, analise, pesquise, seja criticado, vá além... Por falar nisso, por favor, critiquem nos comentários, positivamente, porque eu tenho que aprovar os comentários para eles serem exibidos no blog.

Contribuição

Nosso amigo Bruno Mazieiro (envie o link do seu site para eu por aqui), enviou o css minimizado, segue abaixo:

.btn.btn-volume{-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 0px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);text-shadow:none;}.btn.btn-volume:hover{-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 0px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);box-shadow: inset 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.8);}.btn.btn-destaque {border:none;border-color:transparent;background-color: #E6E7E8;*background-color: #E6E7E8;background-image: -moz-linear-gradient(top, #FFF, #E6E7E8);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E6E7E8));background-image: -webkit-linear-gradient(top, #FFF, #E6E7E8);background-image: -o-linear-gradient(top, #FFF, #E6E7E8);background-image: linear-gradient(to bottom, #FFF, #E6E7E8);}.btn.btn-destaque:hover {background-position:top left;background-color: #E6E7E8;*background-color: #E6E7E8;background-image: -moz-linear-gradient(top, #E6E7E8, #D2D3D5);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E6E7E8), to(#D2D3D5));background-image: -webkit-linear-gradient(top, #E6E7E8, #D2D3D5);background-image: -o-linear-gradient(top, #E6E7E8, #D2D3D5);background-image: linear-gradient(to bottom, #E6E7E8, #D2D3D5);background-repeat: repeat-x;}.btn.btn-destaque.active{background-color: #4F81BC !important;color:#FFF !important;background-image:none;}

E se você programa com CakePHP, saiba como fazer para integrar o Twitter Bootstrap, ou então aqui para ver mais tutoriais sobre este assunto


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!