Design

Como criar um botão estilizado usando apenas CSS

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Veja como transformar um link — na verdade, qualquer elemento em sua página — num botão estiloso, de bordas arredondadas e fonte personalizada, sem emprego de imagens nem scripts. Todo o processo será baseado apenas na folha de estilos e algumas regras CSS modernas como text-shadow e border-radius. Indicado para iniciantes em design web.

No nosso exemplo, os valores de sombra, larguras de borda e arrendondamento, assim como cores escolhidas, podem ser mudadas facilmente, gerando assim uma infinidade de possibilidades para a criação do seu botão personalizado.

Veja como vão ficar na página de exemplo, aqui.

Para começar, abra sua folha de estilos (para usuários de WordPress, normalmente é o arquivo style.css na instalação de seu blog). Para determinar quem vai usar o estilo, crie uma classe personalizada, a qual chamaremos “botao”.

.botao { 

}

Com a classe criada, bastará chamá-la no código de nossas páginas através do identificador. Por exemplo, para usar o estilo “botao” em um link, usaremos um span, assim:

<span class="botao"><a href="#">Link</a></span>

Vamos personalizar o botão. Parece complicado, mas a explicação de cada regra está na sequência.

.botao {
padding: 4px 11px;

border: 1px solid #ffcc00;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background-color: #ffcc00 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}

Explicando cada propriedade:

  • O padding 4px 11px determina que o conteúdo do span ficará com 4px de espaço acima e abaixo do conteúdo, e 11px em cada lateral. Se quiser um botão mais estreito ou baixo, diminua os valores, e vice-versa.
  • Os três valores do border determinam, respectivamente: a borda do span deverá ter 1 pixel de espessura; será sólido; será na cor hexadecimal #ffcc00 (amarelo-ouro).
  • O border-radius determina o quanto arredondadas serão as arestas do elemento que a recebe. Neste caso, o valor será de 8 pixels em cada canto. Para garantir o funcionamento do arredondamento em vários navegadores, estão declarados também com prefixos proprietários -moz (Mozilla) e -webkit (Chrome, Safari) (ou seja, eles não são padrão do CSS, mas específicos para propriedades em determinados navegadores).
  • O background determina a cor de fundo do elemento. Em nosso caso, será preciso fazer diferentes declarações para funcionar em todos os navegadores modernos, e também no Internet Explorer, que mesmo na versão mais atual não renderiza efeitos seguindo o padrão. Atualização 2016: funciona sem problemas no Edge.A primeira propriedade (background-color) atende aos navegadores mais antigos e sem suporte a nenhuma das propriedades seguintes, dando ao elemento a cor amarelo-ouro hexadecimal (#ffcc00). Os outros navegadores terão efeito de degradê no botão, começando do alto (top), com a cor #ffcc00 e indo para a cor #ff6600.
  • Os webkit atenderão a Chrome e Safari (versões mais antigas na primeira propriedade, versões mais recentes na segunda; -moz, ao Firefox; -ms para as versões futuras de Internet Explorer; -o para Opera; o filter funcionará em versões do Internet Explorer entre 6 e 8. A última propriedade background tem um xml gerado pelo site site Colorzilla, codificado em BASE64, que é a única forma do Internet Explorer 9 criar degradês corretamente.
  • Note que todas as propriedades, exceto o filter, usam a declaração !important, o que especifica que elas devem ter prioridade maior que o uso do filtro. Isso evita erros na renderização do degradê em outros navegadores que não sejam o Internet Explorer 9.
  • Em font-family, está o tipo de fonte usada no botão. Pode ser qualquer uma ao seu gosto. Em font-weight, determina-se o “peso” da fonte, no caso, bold (tipo negrito). Em color, está a cor da fonte dentro do botão, neste caso, o valor para a cor branca (fff). Por fim, o text-shadow é outra propriedade razoavelmente recente. Os três primeiros valores determinam que a sombra do texto terá um deslocamento de 0 pixel lateral e 1 pixel vertical em relação ao texto, com um desfoque de 1 pixel. O último valor é a cor da sombra, um tom de cinza (666).
  • O box-shadow é responsável por sombras no elemento span. A primeira parte do valor, antes da vírgula, aplica-se ao topo do span, e a segunda parte, à base. O inset determina que a sombra será criada em direção ao interior do elemento, com deslocamento de 0 lateral e 1 pixel vertical, com desfoque de 1px, na cor branca (#fff). Na parte inferior do elemento, a sombra será para fora (note que não há o inset), deslocamento horizontal 0, vertical de 2 pixels, desfoque de 3 pixels, e no tom de cinza #666.
  • Por fim, cursor: pointer determina que, ao passar o mouse sobre o elemento, o cursor do mouse se transforme na “mãozinha”, tal como em um botão comum, e position: relative, dá ao elemento uma posição fixa em relação ao seu elemento pai (normalmente a div que a contém) – isso será essencial para o efeito de clique do botão.

Com isso tudo, seu botão já estará parcialmente estilizado e funcionando, mas ainda faltam alguns detalhes para completá-lo.

Veja o passo 1 na página de exemplo.

Primeiro, os efeitos quando passamos o mouse sobre o botão, com o seletor :hover.

.botao:hover {
box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
}

O box-shadow mudou: agora os valores de deslocamento e desfoque da sombra superior (na verdade, o efeito de brilho branco) ficam diferentes – maior e mais espalhado. Ao passar o mouse, ele deverá ficar como visto abaixo:

Veja o passo 2 na página de exemplo.

E no botão ao ser clicado, também alguns efeitos com o seletor :active.

.botao:active {
box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
top:2px
}

Veja que mudaram valores da segunda parte, referente à sombra inferior do elemento. A sombra fica menor (apenas 1 pixel de distância). O top determina que o elemento se posiciona a 2 pixels de distância do topo de sua posição original – essa posição foi fixada pela propriedade position: relative, que criamos antes.

Então, ficamos com isso (passe o mouse para ver os efeitos de hover, e clique para os efeitos de active):

Veja o passo 3 na página de exemplo.

Lembrando que para inserir o estilo de botão é só usar um span com a classe botao. Faça testes e modifique os atributos para ver o que consegue de diferente, mescle com outros efeitos de CSS…

Atualização

Colocando links nos botões

Para colocar links nos botões é fácil:

<span class="botao"><a href="https://twitter.com">Twitter</a></span>

Veja o exemplo exemplo 4.

Note que como adicionamos um link ao texto, ele pode pegar estilos comuns aos links de seu pai, seja a página ou um contêiner. Para sobrepor isso, um pouco mais de estilização:

.botao a, .botao a:active, .botao a:hover, .botao a:visited { color: #fff; text-shadow: 0 1px 0 #666; }

Este é o código do CSS completo para os botões:

.botao {
padding: 4px 11px;

border: 1px solid #ffcc00;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background-color: #ffcc00 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}

.botao:hover {
box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
background: -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#ff6600)) !important;
}

.botao:active {
box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
top:2px
}
.botao a, .botao a:active, .botao a:hover, .botao a:visited { text-decoration:none; color: #fff; text-shadow: 0 1px 0 #666; }

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

19 Comentários

  1. Olá Daniel, tudo bem? Parabéns pelo site.
    Por enquanto sou só um visitante, mas pelo jeito do site logo mais me registro!
    Também tenho uma dúvida e acho que deve ser simples: Apenas preciso
    revomer um botão css de minha página. Tem como me ajudar? Precisa de mais
    dados do site ou do código css dele? Fico grato pela atenção!

    • Obrigado!
      Remover um botão através de CSS, tipo escondê-lo? Se puder, passe o link da página pra eu dar uma olhada.

  2. Ola, muito bom o artigo,

    Gostaria que me ajudassem em um probleminha,

    Estou montando uma pagina de vendas em html com um vídeo de vendas, já esta tudo pronto só falta um detalhe,
    Quero que o botão “COMPRAR AGORA” fique invisivel e apareça em um determinado tempo do video, isso é possivel? qual é o comando a ser usado?

    obrigado

  3. Parabéns pelo artigo Daniel. Inclusive esta class pode se usar em um botão de pesquisa, botão de enviar! Obrigado!

    • Tranquilo, só lembrando pra quem for usar em botões de formulário que outros estilos que já existam podem dar conflito, aí precisa dar uma boa revisada no CSS.

    • rsrs..poxa, só agora que eu vi a resposta!! Até tenho aqui ainda. Posso mandar pra algum email?

  4. Olá, estou com uma dúvida: coloquei três botões para ficar no rodapé de uma página. Para isso, montei uma lista (ul) e marquei no css para o display ficar inline, ou seja, na mesma linha. Depois de muitas tentativas, consegui deixar o espaçamento interno (padding) em 30% cada um com relação à pagina. Só que ele não ficou nem um pouco responsivo e perde toda a formatação ao mexer no tamanho da página, mesmo colocando medidas em (em). Alguém pode me ajudar? Desde já, agradeço pela atenção.

    • Desculpe a demora em responder.
      Faz diferente, Guilherme. Em vez do span, use a classe no link, assim:

      <a href=”www/suapromocaoaqui/index.html” class=”botao_facaparte” rel=”nofollow”>ANUNCIE SEU ESTABELECIMENTO</a>

      e coloca o text-decoration:none na classe. Qualquer coisa comente de novo se precisar.

  5. Daniel eu coloquei assim a class=”botao” mas não deu certo, porque?

    Obs.: Se quiser apague a URL da imagem que coloquei no comentário, ela é muito grande e apareceu uma barra de rolagem na horizontal.

    Abraços!!!

      • Não errei nada no CSS, o mais estranho é que eu tinha outro botão no blog e usava # no CSS e no link eu colocava a id=”botao” href… e funcionava normal.

        Abraços!!!

  6. Daniel porque tem que colocar assim <a href=”#”><span class=”botao”>Link</span></a>

    se colocar só assim não dá certo olha <a class=”botao” href=”#”>Link</a> acho que fica melhor assim.

    Essa imagem porque o endereço dela é assim, onde ela está hospedada?
    data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+

    Abraços!!!

    • Começando pelo final:

      Esse código aí é um trecho de Base64, que convertido em xml gera uma imagem no formato SVG para fazer o preenchimento do degradê.

      O resultado do código decodificado é esse aí embaixo:

      <?xml version=”1.0″ ?>
      <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%” viewBox=”0 0 1 1″ preserveAspectRatio=”none”>
      <linearGradient id=”grad-ucgg-generated” gradientUnits=”userSpaceOnUse” x1=”0%” y1=”0%” x2=”0%” y2=”100%”>
      <stop offset=”0%” stop-color=”#ffcc00″ stop-opacity=”1″/>
      <stop offset=”100%” stop-color=”#ff6600″ stop-opacity=”1″/>
      </linearGradient>
      <rect x=”0″ y=”0″ width=”1″ height=”1″ fill=”url(#grad-ucgg-generated)” />
      </svg>

      Como não dá pra colocar o xml dentro da folha de estilos, o jeito é convertê-lo em base64.

      Quanto ao span, tem razão. É que eu publiquei o código original sem link e usando o span pra formatar o texto, aí resolvi continuar como no começo pra não confundir mais. Mas pode sim usar o “a class”.

  7. Olá, como fazer para colocar link nos botões? Estou utilizando a tag para inserir os itens. Coloquei o <a> em diversos lugares e até agora não consegui. Obrigado!

Deixe um Comentário

Pin