Autor: Felipe Alencar
Tema: Customizando botões utilizando o CSS.
Dificuldade: básico.
Recomendações: para um bom aproveitamento deste artigo, é necessário ter conhecimento básico em HTML, CSS e Photoshop.
Testado e Aprovado: IE6.0 IE7.0 FireFox2 e Opera 9.0
Arquivos:
1 arquivo HTML que contem o seu formulário;
1 arquivo css;
1 Imagem do seu botão customizado (Jpg ou Gif)
Fala pessoal!
Sabe aquele botão “enviar” com a cara do Windows, que a gente esta cansado de ver nos formulários? Podemos usar imagens de botões customizados e deixar seu projeto com uma cara muito mais interessante.
Primeiro crie o seu botão no seu editor de imagens preferido, nós utilizamos o Photoshop CS3.
Salve a imagem do seu botão, sem deixar margem. Caso você queira deixar margem, salve no modo Gif com plano de fundo transparente para não comprometer o visual do seu layout.
Vejamos alguns exemplos abaixo.
Download deste exemplo (PSD) 400kb
Abra a sua folha de estilo CSS
iremos inserir o seguinte código:
.enviar { background-image:url(images/bt_enviar.gif); height: 34px; width: 35px; border:0px; }
No item “background-image:url(images/bt_enviar.gif);” você deve informar o endereço da imagem do botão.
Obs: Repare que as coordenadas de altura e largura estão um pouco exageradas pois a imagem do meu botão tem 35px de largura (width) e 21px de altura (height). Porem, por algum motivo que ainda não descobrimos, sabemos que essas dimensões foram necessárias para uma correta visualização do botão.
Salve seu documento css.
Abra seu formulario.html no seu editor preferido e localize o código referente ao botão submit.
<input name="botao" type="button" value="Enviar">
Vamos trocar esse código pelo código abaixo. Sobrescreva.
<button type="submit" class="enviar"> </button>
Salve o documento HTML e teste.
Veja um exemplo finalizado:
Qualquer dúvida, e esclarecimento mande um comentário, até a próxima.
Felipe Alencar
Next4.com.br
Equipe Alvo Web
O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.
2 respostas ↓
1 Lucas barthman // Mi 28, 2008 at 1:00 am
Apenas acrescentando…
Se você colocou seu botão em cima de um background, nao se esqueça de marcar a opção background color: transparent, para nao ter problemas com a falta de transparência no seu botão, como no meu caso, utilizei um botão redondo e os cantos ficaram com background, mesmo eu tendo salvo a imagem em png com camada de transparência, então fica mais ou menos assim:
.buttons{
width:17;
height:18;
background-image:url(’botao.png’);
background-color:transparent;
border:0px;
margin:0px; }
Parabéns pelo tópico.
2 Antonio // Jan 4, 2010 at 1:32 pm
muito bom post
Faça um comentário