Botões CSS: Tutoriais e Exemplos
Criar botões com CSS é uma das técnicas de design da Web mais experimentadas. Exemplos e tutoriais são abundantes.
A maior tendência recente no design de botões CSS parece estar eliminando imagens, especialmente imagens de fundo, dos botões. Mas há muitas outras coisas que os designers estão fazendo com os botões, alguns que incluem imagens.
Abaixo, coletamos mais de vinte tutoriais, exemplos e ferramentas para criar botões CSS, a maioria dos quais usa CSS3.
Estão incluídos botões para atender praticamente todos os estilos de design. Nós tentamos nos concentrar em técnicas mais recentes aqui, deixando de fora as técnicas de longa data (como o método da porta de correr para criar cantos arredondados) com os quais a maioria dos designers já está familiarizada.
Se você tem outros tutoriais ou exemplos que gostaria de compartilhar, por favor faça-o nos comentários!
Tutoriais e artigos
Redescobrindo o elemento button
Um artigo realmente útil discutindo o button elemento em CSS, que é frequentemente ignorado pelos designers. É um pouco mais antigo, mas ainda tem toneladas de informações úteis sobre a criação de botões mais elegantes com CSS.
Belos botões CSS com conjunto de ícones
Aqui está outro artigo que fala sobre como criar botões com ícones, embora usando span classes em vez do button elemento.
Construa botões CSS3 práticos
Este tutorial em vídeo do Nettuts + mostra como criar botões CSS3 práticos que incluem até mesmo o que parece ser uma imagem de ícone do pássaro do Twitter, mas na verdade é criado inteiramente com CSS3.
Lindos botões do tipo Photoshop com CSS3
Embora os botões aqui não sejam particularmente inovadores em termos de aparência, o que é surpreendente é que eles foram criados usando CSS3, sem usar imagens, e foram baseados apenas em botões criados no Photoshop.
Melhor botão e interações de navegação
Este é um excelente tutorial de Darren Hoyt sobre a criação de melhores comportamentos para os seus botões que incentivam os visitantes a interagir com o seu site.
Super botões impressionantes com CSS3 e RGBA
Este tutorial da Zurb cobre o uso de CSS3 e mistura alfa usando RGBA para criar botões escalonáveis com apenas uma única imagem PNG.
Construindo belos botões com gradientes CSS
Um tutorial para criar um botão usando gradientes CSS semelhantes aos usados pelo Mozilla para o Firefox Personas.
Como criar um botão sexy usando CSS
Este tutorial mostra como criar um botão grande e vibrante sem usar imagens.
Realistas procurando botões CSS3
Estes são botões simples, criados inteiramente com CSS3, incluindo alguns pseudo-elementos.
Belos botões CSS3
Este tutorial mostra como criar um botão simples, ligeiramente brilhante, escalável e que pode ser criado em qualquer cor sem imagens.
Botões CSS3 sem imagens
Um tutorial simples para criar botões dinâmicos que usam apenas CSS3 e nenhuma imagem. Existem quatro estados para cada botão, incluindo estados desativados, flutuantes e clicados.
5 tutoriais diferentes de botões de link de CSS rounds dinâmicos
Esta é uma coleção de cinco tutoriais diferentes para criar botões CSS com cantos arredondados. Dois incluem o uso de imagens, mas os outros três não.
Crie um botão CSS3 que degrada bem
Até que todos os navegadores suportem corretamente o CSS3, teremos problemas ao usá-lo para criar coisas como botões. Este tutorial mostra como criar ótimos botões CSS3 que também parecem bons em navegadores mais antigos, como o IE6 e o 7.
Barra de navegação da Apple usando apenas CSS
Este tutorial mostra como recriar o menu de navegação no estilo do botão no site da Apple. Funciona melhor no Safari 3+, mas ainda parece bem em outros navegadores.
Crie um botão de chamada de ação CSS3
Este tutorial mostra como criar um botão de chamada para ação inteiramente com CSS que inclui diferentes estados padrão e de foco.
Botões sensuais com CSS3
Este tutorial simples mostra como criar botões de estilo agradável com um foco exclusivo e estados ativos. Os botões podem ser dimensionados e sua cor pode ser alterada facilmente.
Botões brilhantes sem imagens usando apenas CSS3
Olhando para esses botões, é difícil acreditar que eles são feitos sem imagens, a menos que você olhe bem de perto. O código é complicado, mas o resultado final parece ótimo, completo com efeito de foco.
Botões CSS3 com ícones
Este tutorial mostra como criar botões CSS3 com gradientes que também incluem imagens de ícones e são compatíveis com vários navegadores.
Role seus próprios botões do Google
Este tutorial mostra como criar botões escalonáveis do estilo do Google com bordas coloridas. Os resultados finais são minimalistas e limpos.
Exemplos e ferramentas
10 botões CSS3 impressionantes para usar em seu site
Aqui está uma coleção de dez botões que você pode usar em seu site. Eles são todos bastante básicos, mas são criados usando apenas CSS3 sem imagens.
Botões gradientes CSS3
Esta é uma enorme coleção de botões CSS3 do Web Designer Wall. Incluem-se uma variedade de formas, tamanhos e cores, todos com gradientes. Uma das melhores partes sobre eles, porém, é como esses botões degradam graciosamente em navegadores que não têm suporte total a CSS3.
Fabricante de botão
CSS-Tricks oferece este criador de botão CSS3 grátis. Basta definir as cores de fundo para cada estado do botão, o tamanho e os atributos de texto, e criará o código CSS para você.
Botões radioativos
Esses botões usam animações CSS no Safari para criar um efeito pulsante e brilhante. Em outros navegadores que suportam CSS3, eles ainda são perfeitamente funcionais e parecem muito bem.
Conhece outras técnicas para criar incríveis botões CSS que não foram mencionados aqui? Ou tem um exemplo favorito? Por favor compartilhe-os nos comentários!