Porque utilizar botões expansíveis:

• Reduz número de arquivos;
• Reduz arquivos a serem baixados pelo usuário;
• Carregamento da página mais rápido;
• Reduz classes no HTML / linhas de CSS;
• Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Convencido disto, aprenda como fazer:

1. Criar a imagem do botão:
2. Dividir a imagem em 2 partes:
   • O botão será formado por duas peças: o lado esquerdo, e o direito.

   • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

     

     Botão expansível CSS - Passo 1

     Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

   • Selecione o lado direito
   • Abra um novo arquivo (só para ele)
   • Coloque a borda de um lado da imagem (cole no canto direito)
   • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
   • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
     
     

     Photoshop Redimensionamento

   • Salve como: botao_direito.png

3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

         <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
       

   - Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

4. Código CSS*:

         .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
         .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
       

Quem usa os botões expansíveis (HTML + CSS)?

• Construtora Tecnisa: ex.: botão de busca no topo.
• Porto Seguro: os botões verdes no meio do conteúdo.

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS