Por vezes na construção de sites deparo-me com um problema, não quero criar uma imagem para cada botão que crio e não me apetece ter um botão quadrado completamente plano, por vezes pode mesmo quebrar o design do site.
Código HTML
A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.
Fica aqui algumas referencias úteis:
- http://particletree.com/features/rediscovering-the-button-element/
- http://www.htmlhelp.com/reference/html40/forms/button.html
- http://www.w3schools.com/tags/tag_button.asp
Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.
<button><span><em>Texto Botão</em></span></button>
O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.
Após o código HTML é necessário criar uma imagem suficientemente larga para que independente da largura do botão ela se adapte sem quebras. De preferência crio sempre uma imagem com a largura do contentor onde o texto se encontra. Por exemplo se o texto tiver dentro de um DIV com 550 pixels de largura crio uma imagem com 550 pixels. Desta forma sei que por mais longo que o texto seja não irá quebrar.
Imagem usada no tutorial:
CSS
Em seguida vamos aplicar a imagem. A TAG BUTTON irá funcionar como contentor, o elemento SPAN e EM ficam com um estilo geral:
button {
border:none;
background:none;
padding:0;
margin:0;
width:auto;
text-align:center;
height:40px;
}
button span, button em{
display:block;
margin:0;
height:40px;
font:9pt Helvetica, Verdana, Arial, sans-serif;
color:#000000;
}
Em seguida aplicamos a imagem como background do SPAN, a imagem ficará da esquerda para a direita mostrando o canto esquerdo e o fundo do centro do botão:
button span{
padding-left:20px; /* mostrar canto esquerdo arredondado */
background:url(btn_bg.png) no-repeat 0 0;
}
Agora o elemento EM a onde se encontra o texto:
button em{
padding-right:20px;
background:url(btn_bg.png) no-repeat 100% 0; /* os 100% serve para adaptar a largura do botão */
line-height:38px;
}
Este código foi testado em Firefox 2, Internet Explorer 7 e 8 em Windows XP. Agradeço se alguém testar nos outros browsers e sistemas operativos.
Referência: http://www.alistapart.com/articles/slidingdoors/