PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

26/10/2015

Gerador de botões em CSS gratuito

Gerador de botões em CSS gratuito

Botões personalizados

Nos artigos Crie botões personalizados para o seu Blogger e Crie botões personalizados no Wordpress mostramos algumas formas para você criar botões personalizados  e inserí-los em blogs desenvolvidos no Blogger ou no Wordpress.

Botões são elementos de layout  que servem para indicar e incentivar os leitores de um blog ao clique, ou seja, levam os seus visitantes a executarem um evento de interação. Por isso, é muito importante que os botões sejam atrativos, fiquem bem localizados e que combinem com o layout do site onde serão incluídos.

Mas se você quer fazer algo mais rápido, bateu uma preguiça ou é iniciante no mundo CSS, vamos apresentar nesta postagem um aplicativo gratuito e bem bacana para você criar seus próprios botões em CSS com apenas alguns cliques. Veja a seguir:

Utilizando o Gerador de botões

  Acesse o site: http://css3buttongenerator.com/

Gerador de botões em CSS gratuito - Visual Dicas

1) Defina a font-family (Arial, Georgia ou Couries New), font-color (cor da fonte), font-size (tamanho da fonte) e font-shadow (sombreamento da fonte).

Gerador de botões em CSS gratuito - Visual Dicas

Para definir a font-family mantenha a caixa de seleção acionada e escolha entre as fontes disponíveis (Arial, Georgia ou Couries New).

Para definir a font-color, digite o código da cor ou clique no botão ao lado para definir a cor da fonte do botão.

Gerador de botões em CSS gratuito - Visual Dicas

Para definir o tamanho da fonte, digite o valor em px ou deslize o cursor ao lado.

Gerador de botões em CSS gratuito - Visual Dicas

Para criar sombreamento da fonte, marque a caixa de seleção font-shadow. Defina a cor da fonte e os parâmetros x, y e blur deslizando os cursores. Você poderá testar vários tipos de sombreamento e caso não encontrar o que deseja poderá desativar a caixa de seleção voltando ao padrão sem sombreamento.

Gerador de botões em CSS gratuito - Visual Dicas

2) Defina dimensões da caixa do botão clicando na aba +Box.

Gerador de botões em CSS gratuito - Visual Dicas

Da mesma forma que os ajustes anteriores, defina o box-shadow (sombreamento da borda do botão), padding-top (espaçamento entre o texto e a borda superior do botão), padding-right (espaçamento entre a borda direita e o texto do botão), padding-bottom (entre a borda inferior e o texto do botão) e finalmente padding-left (entre a borda esquerda e o texto do botão).

Atenção: Se você selecionar a caixa padding você definirá o valor dos espaçamentos superior, direito, inferior e esquerdo todos iguais.

Gerador de botões em CSS gratuito - Visual Dicas

3) Na aba +border defina o border-radius (raios dos vértices da borda). Selecione a caixa border caso queira definir a cor, estilo e espessura da borda do botão. Com a caixa border desmarcada a borda do botão terá a mesma cor do fundo.

Gerador de botões em CSS gratuito - Visual Dicas

4) Na aba +Backgroud defina a cor de fundo do botão. Se você selecionar solid, a cor será uma única cor sem efeito gradiente (mistura de cores). Se você optar por gradiente, coloque de preferência a mesma cor com tons diferentes nos parâmetros em start color e end color.

Gerador de botões em CSS gratuito - Visual Dicas

5) Na aba +Hover você irá definir os parâmetros da pseudo classe Hover, ou seja, promoverá uma mudança cor quando passar com cursor do mouse sobre o botão. Para isso escolha cores diferentes da que você utilizou na aba +Background.

Dica: Para facilitar, apenas inverta os valores star-color e end-color dos parâmetros que você utilizou na aba +Background.

Gerador de botões em CSS gratuito - Visual Dicas

Pronto, agora é só copiar o código CSS e inserí-lo no blog.

Gerador de botões em CSS gratuito - Visual Dicas

Colocando o código CSS no blog

Se você estiver utilizando as plataformas CMS do Blogger ou Wordpress, siga os tutoriais abaixo:

Como inserir códigos CSS no Blogger

Como usar CSS no Wordpress

Utilizando o código CSS nas suas postagens

Para você definir um botão com o estilo criado no CSS Button Generator, basta colocar a classe btn em qualquer hyperlink HTML que você utilizar nas suas postagens, como mostramos no exemplo abaixo:

<a class="btn" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados"  target="_blank">Como criar botões</a>

Se você tem dúvidas sobre como colocar códigos HTML nas postagens do blog, leia:

Como inserir códigos HTML nas postagens do Wordpress

Como inserir códigos HTML nas postagens do Blogger

Testando o botão

Para testar os botões antes de colocar no seu blog, acesse o Squids Editor no link: Tente você mesmo »

(Para visualizar os resultados clique no botão [Enviar código]).

Observe que em uma página HTML o código CSS deverá estar compreendido entre as tags <style> e </style>.

Gerador de botões em CSS gratuito - Visual Dicas

Criando botões 3D através de programação CSS

Para conhecer mais sobre como criar botões em CSS utilizando a programação, leia as postagens:

Crie botões personalizados para o seu Blogger

Crie botões personalizados no Wordpress

Criando botões personalizados

Outros serviços de criação de botões

Conheça os melhores serviços geradores de botões da Web no nosso Portal: www.visualdicas.com.br

Gerador de botões em CSS gratuito - Visual Dicas

byALF

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More