Dica Rápida: Insira um botão no seu site

Botões no seu site são sempre uma boa forma de levar os seus visitantes a uma outra página que você pretende. Além de mais atrativos, eles incentivam ao clique. Saiba como criar botões personalizados e inserir no seu site.

 

 

 

Neste pequeno tutorial, ensinamos você a colocar um botão personalizado no site. Estes botões são ótimos para aumentar as visualizações de páginas no seu site, facilitam a navegação e criam um design mais atraente.

O primeiro passo é criar o próprio botão. Para isso, recomendamos um site onde o pode fazer bem simples: http://dabuttonfactory.com/ . Aqui você cria esses botões de forma grátis.

Preencha os dados que lhe são pedidos: escreva o texto que vai aparecer no botão e personalize à sua maneira. Pode alterar as cores, estilo, sobras, bordas e até o tamanho. Assim que o botão estiver personalizado ao seu gosto, salve a imagem no seu computador. Agora é hora de colocar o botão no seu site. Faça upload da foto no artigo onde deseja ter o botão e coloque um link na imagem para a página que quer levar o seu visitante.

Veja o nosso exemplo:

Se vai seguir o nosso conselho, partilhe conosco o resultado final.

  • Biel

    Obrigado por ensinar..criei o meu !!

  • Paulo

    Gostaria de colocar um botão em css, todos os códigos gerados estou colocando na opção incorporar código, logo vem a mensagem de segurança em seguida clico para ver o conteúdo do bloco e não gera o botão aparece o código, acho muito melhor botoes ao passar o mouse escurecem ou clareiam tenha efeitos bacanas, isso chama muito mais a atenção para ser clicado.

    • Paulo, verifique se o código está correto/completo.
      Se o problema persistir, contacte o nosso suporte ao cliente: suporte@webnode.com.br

    • Paulo

      Muito Obrigado valeu pela Ajuda

  • Paulo

    ssss

  • Paulo

    Eu encontrei um código correto

    body {background:#eee;}

    .i2Style{

    font:bold 24px Tahoma, Geneva, sans-serif;

    font-style:normal;

    color:#a0d25f;

    background:#363533;

    border:3px solid #72ae23;

    text-shadow:0px -1px 0px #0d0d0d;

    box-shadow:0px 0px 5px #333;

    -moz-box-shadow:0px 0px 5px #333;

    -webkit-box-shadow:0px 0px 5px #333;

    border-radius:15px 15px 15px 15px;

    -moz-border-radius:15px 15px 15px 15px;

    -webkit-border-radius:15px 15px 15px 15px;

    width:113px;

    padding:20px 45px;

    cursor:pointer;

    margin:0 auto;

    }

    .i2Style:active{

    cursor:pointer;

    position:relative;

    top:2px;

    }

    Webnode

    Este é o código Html que gerou o botão agora vem a parte mais complicada para eu, colocar um endereço de um site, ou uma pagina e etc neste botão para quando ser clicado ser direcionado para uma pagina, ajuda ajuda ajuda

    • Paulo, você terá que inserir este código diretamente na caixa de texto e imagem através do “Código Fonte”. Depois sublinhe o texto e insira o link da página.

    • Addy Holder

      Olá…. como faço pra modificar a altura deste botão? agradeço (Y)

      • Olá Addy. Para modificar a altura do botão, terá que ir na secção “Size” e definir a sua altura onde diz “Vertical padding”.

  • Fernanda

    Olá!
    Eu preciso de um botão “Solicite Orçamento” que abra um formulário e nele eu possa incluir os valores e enviar para o botão Compras. Tem jeito?

    • Olá Fernanda. Será que você já testou a sugestão indicada na nossa Dica Rápida? Também poderá adicionar um botão através do contato por formulário.