CSS: Desenvolvimento rápido de botões sem imagem

Com tantas ferramentas e técnicas para conhecer, muitas vezes torna-se difícil para designers e desenvolvedores acompanharem seus projetos e gerenciar seus trabalhos.

Por | @mauriciomello75 Programação

Com tantas ferramentas e técnicas para conhecer, muitas vezes torna-se difícil para designers e desenvolvedores acompanharem seus projetos e gerenciar seus trabalhos. Uma das coisas que devemos levar em consideração no fluxo de trabalho diário são as facilidades que a internet nos proporciona. Geradores online podem ser extremamente úteis para a criação de pequenos detalhes.  

Apresentarei um recurso muito interessante e de fácil manuseio que podemos adotar no desenvolvimento de ferramentas para web. O CSS Generator é uma ferramenta útil, gratuita e online que pode ajudá-lo a reduzir o tempo na criação de botões sem o uso de imagens e disponibilizando o código em CSS para implementação.

CSS: Desenvolvimento rápido de botões sem imagem
Figura 1 - apresentação do botão

 

Painel de controle dos estilos

Neste painel configuramos as propriedades do CSS e quando gerado o código será dado suporte aos navegadores Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), o Opera e o IE9. Embora o navegador Mozilla e Webkit ainda exija a inserção dos prefixos -moz- e -webkit- (nota Mozilla Firefox 4.0 + não requer mais o -moz- prefixo).

 

1a Parte – Criando o elemento

  • Button Text – Valor que será incluído no botão;
  • CSS Class Name – Nome da classe que será inserida no código;
  • Font – Família da fonte;
  • B – Inserir a fonte em negrito;
  • Show <style> tag? – Apresentação ou não da tag style no código;
  • Font Size – Tamanho da fonte;
  • Border Radius – Arredondamento da borda;
  • Border Size – Espessura da borda
  • Vertical Size – Altura;
  • Horizontal Size – Largura.

 

CSS: Desenvolvimento rápido de botões sem imagem
Figura 2 - Criando o elemento

 

2a Parte – Propriedade da Sombra

Quando assinalada esta propriedade permite aos designers facilmente implementar sombras múltiplas (externo ou interno) nos elementos especificando valores para cor, tamanho e blur. É um efeito muito interessante e de grande utilidade já que substitui imagens.

  • Vertical Position – Eixo vertical para o posicionamento da sombra;
  • Horizontal Position – Eixo horizontal para o posicionamento da sombra;
  • Blur Radius – Efeito de ofuscamento;
  • Spread Radius – Aumenta o efeito da sombra sem criar ofuscamento.

CSS: Desenvolvimento rápido de botões sem imagem
Figura 3 - propriedade da sombra do elemento

 

3a Parte – Propriedades da sombra do texto

Essas propriedades do CSS podem tornar o texto mais legível se o contraste entre o primeiro plano e o fundo for pequeno.

  • Vertical Position – Eixo vertical para o posicionamento da sombra;
  • Horizontal Position – Eixo horizontal para o posicionamento da sombra;
  • Blur Radius – Efeito de ofuscamento da sombra;

CSS: Desenvolvimento rápido de botões sem imagem
Figura 4 - propriedade sombra do texto

 

4a Parte – Paleta de cores

Para facilitar a adequação ao seu layout, a ferramenta proporciona a opção de temas pré-definidos, no quesito cor, além da possibilidade de colocar transparente ou sólido o botão. 

CSS: Desenvolvimento rápido de botões sem imagem
Figura 5 - Paleta de cor

 

Após toda a etapa de configuração do botão, podemos verificar o código gerado clicando no botão, conforme figura abaixo.

CSS: Desenvolvimento rápido de botões sem imagem
Figura 6 - código gerado

 

Autor: Mauricio Mello é Diretor de Novos Negócios na empresa Proevo Soluções em TI - www.proevo.com.br

Mais sobre: css, dicas
Share Tweet
DESTAQUESRecomendadoMais compartilhados
Comentários
AINDA NÃO SE INSCREVEU?

Vem ver os vídeos legais que
estamos produzindo no Youtube.