Como fazer botão a partir de um link

Conhecimento: um pouco de css
Nível: médio

Quando criamos um site, seja utilizando Joomla, seja um site estático, uma das coisas mais chatas fica por conta dos botões.

Se tivermos botões com diferentes escritos (ex: Continue…, Ver +, Prosseguir) cada um será um botão de tamanho diferente de acordo com o texto que irá escrito nele. Se resolver fazer tamanho fixo, soluciona em parte o nosso problema, mas há de se concordar que um botão enorme com um “Ver +” fica bem amadoresco.

Inicialmente temos um código qualquer de link:

   1: <a href="index.html" class="botao">Continuar…</a>

Até aqui normal.  Vamos ao css:

   1: .botao {

   2:     text-decoration: none;

   3:     display: inline-block;

   4:     background:#ccc;

   5:     padding: 5px;

   6:     color:#000;

   7: }

Linha 2: Tira o sublinhado. 

Linha 3:  Aqui o segredo! Se você não colocar ele, os elementos que vierem abaixo irão invadir o espaço do botão. Assim o link deve se comportar como block, mas se for somente block, o link irá se extender pelo tamanho total do navegador. Teste e veja.

Linha 4: Fundo cinza.

Linha 5: Padding pra não ficar com os escritos colados na borda

Linha 6: Cor da fonte.

E botão redondo?

Botão redondo dá pra fazer utilizando css3, mas como queremos compatibilidade com os Internet Explorers da vida, temos que usar um addon em jquery pra isso.

Assim, coloque no header a seguinte chamada:

   1: <script src="http://www.google.com/jsapi"></script>

   2: <script>

   3:     // Load jQuery

   4:     google.load("jquery", "1.5");

   5: <script>

   6:     jQuery.noConflict();

   7: <script type="text/javascript" src="http://curvycorners.googlecode.com/svn/tags/2.1.x/beta/2.1/curvycorners.src.js">

Linha 1: Carrega do Google a API Javascript 

Linha 4: Carrega Jquery versão 1.5.x

Linha 7: Eliminar conflito com outras bibliotecas javascript (opcional)

Linha 9: Carrega o addon que irá tratar de bordas arredondadas na maioria dos navegadores.

Agora no css do botão você pode usar as propriedades de bordas redondas:

   1: .botao {

   2:     text-decoration: none;

   3:     display: inline-block;

   4:     background:#ccc;

   5:     padding: 5px;

   6:     color:#000;

   7:     border-radius: 5px;

   8:     -webkit-border-radius: 5px;

   9:     -moz-border-radius: 5px;

  10: }

Linha 7:  Caso o navegador suporte css3 ele irá interpretar isso e fazer um canto arredondado de raio 5px.

Linha: 8: Para navegadores como Safari e Chrome, você deverá usar essa sintaxe.

Linha 9: Para navegadores como Firefox, você deverá adicionar essa sintaxe.

Mas tem a necessidade de usar os três?

Sim. Cada um cobre um buraco. Ao incluir essa tríade: border-radius, –webkit-border-radius e –moz-border-radius, no caso do navegador não suportar nenhuma dela (ex: IE), o script curvycorners será acionado e se encarregará de fazer a borda redonda.

Como resultado teremos um botão semelhante a isso na maioria dos navegadores, incluindo IE6.

PS: O melhor, o curvy funciona também com fundo sendo imagem:

Bom, espero ter ajudado!