Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 13 março 2009

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).

Botão expansível CSS

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

      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) Criando a imagem do lado direito
    • 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

      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)?

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

5 comentários

Responder
  1. 13 de março de 2009

    Carlitos disse:

    Outra boa maneira de fazermos botões expansíveis seria usando apenas uma imagem, com largura suficiente para comportar qualquer botão no site… Por exemplo, uns 500 pixels de largura.

    Assim no elemento do link usaríamos o background-position: 0 0; enquanto no strong ou span, colocaríamos o background-position: right 0;.

    Desta forma usamos só uma imagem. Mas é importante salientarmos que esta segunda maneira só é válida quando não usamos uma imagem com fundo transparente, se não a imagem do link irá ficar por trás da imagem do strong, assim não dará o efeito desejado ao botão.

  2. 28 de maio de 2010

    Botão expansível CSS – links com background « Diretório Técnico disse:

  3. 31 de dezembro de 2010

    Alexandre disse:

    olá bom dia!
    você poderia disponibilizar os arquivos para download deste post?
    abraço.

  4. 15 de outubro de 2011

    Clã Celestial Blog disse:

    Muito bom, e com o CSS3 será possível faze-lo sem imagens.

  5. 19 de outubro de 2011

    g3 disse:

    Exatamente, com CSS3 é possível fazer sem imagem um botão igual esse, ou pode ser feito apenas com um elemento, apenas o link sem o strong, usando multiple background.

Escreva seu comentário