Botão de ação incrível com CSS3

Continuando com meu artigo anterior mostrando o poder do CSS3 para web designers, agora vou compartilhar com vocês um método para criar um botão de call to action elegante usando apenas CSS. Como no último artigo, vou pegar um tutorial anterior do Photoshop chamado Como criar um botão elegante e limpo no Photoshop, do editor-chefe do Six Revisions, Jacob Gube, e tentar o meu melhor para recriá-lo sem usar um editor gráfico. Acho que fazer isso é uma das melhores maneiras de destacar o fato de que CSS3 pode tornar nosso trabalho como web designers muito mais fácil. Confira o tutorial do Photoshop e me diga o quão perto cheguei de recriar seu produto final.

Demonstração ao vivo do botão de call to action CSS3

Aqui está o que vamos fazer. Na verdade, está ao vivo, então fique à vontade para passar o mouse sobre o botão (clicar nele o levará para a página inicial das Seis Revisões). Se você não consegue ver logo abaixo, você pode ter os iFrames desativados ou estar usando um navegador que ainda não suporta esses módulos CSS3.

Demonstração na página

Captura de tela do botão Call to Action

Veja como o botão de apelo à ação deve parece (junto com seu estado de foco em azul).

Marcação HTML básica

Ok, vamos lá: vamos começar com o HTML. Muito simples aqui, basta um div para conter o botão e um elemento de hiperlink normal com uma classe de .btn (abreviação de “botão”) que representará nosso botão de call to action. Que grande lembrete de como era a vida antes do CSS! Observação: O div em torno do elemento hiperlink não é realmente necessário para que isso funcione, mas é sempre uma boa ideia ter um contêiner para flexibilidade.

  
Basic CSS
 Here we will add our first bit of CSS — just some basic styles for the normal and hover states of the button. Note: The background colors will be superseded by CSS3 gradients later on, but it’s always good practice to have a back-up plan in case the user is using a browser that doesn’t support CSS3. 
a.btn { width: 250px; padding: 10px 25px 10px 25px; font-family: Arial; font-size: 16px; text-decoration: none; color: #ffffff; background-color: #98ba3f; } a.btn:hover { background-color: #245191; }
 
Dê ao botão um atributo CSS de sombra de texto
  Nesta etapa, damos ao texto do botão de call to action uma sombra sutil. Na verdade, isso não é CSS3, mas também não é um atributo CSS muito usado. Fazemos a cor do text-shadow atributo diferente para o estado normal e o estado de foco (usando o :hover pseudoclasse).
a.btn { text-shadow: -1px -1px 2px #618926; } a.btn:hover { text-shadow: -1px -1px 2px #465f97; }
 
Dê ao botão uma borda fina
  Vamos adicionar uma borda fina de 1px a ambos os estados do botão para torná-lo um pouco mais interessante.
a.btn { border: 1px solid #618926; } a.btn:hover { border: 1px solid #0f2557; }
  Como até agora usamos apenas especificações CSS2, é assim que nosso botão de call to action ficará (degradação) em navegadores mais antigos. 
Arredonde os cantos com CSS3
  Tudo bem, é aqui que as coisas ficam interessantes. Usaremos CSS3 para adicionar um efeito sutil de canto arredondado ao botão. Usando prefixos de fornecedores de navegadores (por exemplo  -moz- para navegadores Mozilla), podemos adicionar um 3px border-radius atribuir ao .btn classe que irá arredondar os cantos do botão. Dica: Para saber mais sobre alguns princípios básicos do CSS3 e por que temos que usar esses prefixos de fornecedores malucos, verifique meu artigo anterior chamado Técnicas CSS3 que você deve conhecer.
a.btn { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.btn:hover { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  Não é uma grande mudança, mas parece mais interessante. Concordar? 
Adicionar gradientes CSS3
  Nesta etapa final, adicionamos os estilos que realmente dão vida a este botão. Implementamos os gradientes de fundo que dão ao botão sua aparência elegante e moderna característica. Precisamos de uma cor gradiente inicial e final, bem como uma cor final intermediária. Admito que a versão do WebKit (que afeta o Apple Safari e o Google Chrome) parece bem complicada. Já vi inúmeras maneiras de criar gradientes para navegadores baseados em WebKit, mas nenhuma delas parece ser tão simples quanto o método dos navegadores Mozilla.
a.btn { background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926)); } a.btn:hover { background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d)); }
  Aqui está como deveria ser (eu diria que é bem parecido com o tutorial original do Photoshop no qual se baseia). 
Todo o CSS junto agora!
  Aqui está nosso CSS completo para o .btn aula.
a.btn { width: 250px; padding: 10px 25px 10px 25px; font-family: Arial; font-size: 16px; text-decoration: none; color: #ffffff; text-shadow: -1px -1px 2px #618926; background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926)); border: 1px solid #618926; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.btn:hover { text-shadow: -1px -1px 2px #465f97; background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d)); border: 1px solid #0f2557; }
Finalizado!
  Aí está! Com um número relativamente baixo de estilos, obtemos um botão bastante semelhante à versão do Photoshop. Se você ainda não estava tão entusiasmado quanto eu com o CSS3, espero que este artigo o encoraje a explorar e usar esta próxima iteração do CSS. 
Mais leitura de CSS3
  Leia estes outros artigos e tutoriais para saber mais sobre CSS3.
Baixar arquivos de origem
css3-call-to-action-button-demo (ZIP, 0,1 KB)
Conteúdo relacionado