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/