Se você está estudando CSS, talvez ache um pouco complicado criar um botão de ação, também conhecido como CTA (Call to Action, em inglês).
Por mais que, com um pouco mais de familiaridade com o CSS, seja relativamente fácil criar um botão do zero, existem muitas ferramentas online e gratuitas que possibilitam a criação de um botão em pouquíssimos passos.
Sendo assim, conheça três geradores de botões em CSS que separamos para você:
Da Button Factory
O Da Button Factory é uma ferramenta simples de utilizar, porém com recursos mais limitados.
Lá, você encontrará opções para alterar o texto do botão, a fonte (a ferramenta oferece 17 opções diferentes), e características de estilo do botão, como tamanho, sombra e cores.
O ponto negativo é a impossibilidade de alterar as características do botão quando o ponteiro do mouse está por cima (hover), deixando o botão mais estático e pouco atrativo.
CSS Button Creator
Com uma interface um pouco mais amigável, o CSS Button Creator também possibilita criar um botão em CSS com várias características personalizadas.
É possível também alterar as características do botão quando o mouse está em cima.
A ferramenta também gera o código completo em CSS, com as classes já aplicadas no link, fazendo sua implementação muito mais fácil.
CSS Button Generator
Para quem procura uma ferramenta mais completa, o CSS Button Generator pode agradar.
Além de ter todas as funcionalidades anteriores, ele permite também inserir um texto secundário, abaixo do texto principal, além de poder inserir ícones e GIF’s junto ao botão.
É possível baixar o código em CSS completo ao terminar a personalização ou o PNG estático do botão gerado, além de procurar botões prontos em sua coleção.
Dica adicional: utilize belas combinações de gradientes em seus botões
Todas as opções acima oferecem a possibilidade de criar o botão com um gradiente como cor de fundo.
Uma dica de ouro ao criar gradientes é utilizar o site uiGradients, que mostra belas sugestões de gradientes que em sua maioria funcionam muito bem em botões.
Você conseguirá escolher o gradiente preferido e verificar o código hexadecimal das cores envolvidas. Depois, basta inserir os códigos nas ferramentas citadas acima.
Vale a pena navegar em sua coleção de gradientes, mesmo que for somente para inspiração.
Gostou das dicas? Comente abaixo!
