Central de Ajuda Wix
    Início
  1. Crie o seu site
  2. Use o Editor Wix
  3. Adicione e personalize elementos
  4. Botão
    5. Editor Wix: personalizar o design dos botões

Editor Wix: personalizar o design dos botões

9 min de leitura
Crie botões lindos e atraentes que combinam perfeitamente com o seu site e atraem os visitantes do site para interagir com ele. 
Clique no ícone Design no seu botão para começar a personalizar.
Neste artigo, confira: 

Personalizar os estados do botão

Você pode personalizar os estados de cada botão do seu site separadamente. Isso permite que você crie efeitos incríveis que os visitantes veem enquanto navegam pelo seu site.
Por exemplo, você pode escolher uma cor para a exibição normal, uma cor diferente para a exibição ao passar o mouse e outra para quando o botão é clicado. Isso destaca o botão para mostrar aos seus visitantes que ele é interativo.
Importante:
Efeitos ao passar o mouse (tocar) em botões de ícone não são compatíveis com iOS no momento. Isso significa que os visitantes que visualizam seu site em um dispositivo iOS não veem o estado ao passar o mouse quando tocam no botão.

Fazer o design do botão

Há uma variedade de opções de personalização disponíveis. Dependendo do tipo de botão, você pode ajustar o background, o texto e o ícone. Escolha as cores, preenchimentos, cantos, sombras e muito mais.

Escolha o que você quer fazer:

Saiba mais sobre como personalizar outros tipos de botões:

Glossário de design

Opções de design do botão

Opção
Explicação
Como usar
Preenchimentos
Adicione preenchimentos como cores, imagens, estampas e gradientes para criar efeitos incríveis e coloridos no seu botão. 
  • Clique na caixa de cores para cada camada e escolha o tipo de preenchimento, e então arraste o slider para alterar a opacidade do preenchimento da camada.
  • Reordene as camadas de preenchimento arrastando-as para cima e para baixo na lista. 
Bordas
Personalize a borda do botão para destacá-lo. Personalize todos os lados dos botões juntos, ou cada lado separadamente, clicando nos ícones de bloqueio e desbloqueio. 
  • Clique no campo Largura para adicionar a largura em pixels, ou ajuste o slider.
  • Clique no meu dropdown de Estilo e selecione o estilo da borda.
  • Clique na caixa de cores Preenchimento para selecionar a cor da borda e use o slider para ajustar a opacidade. 
Cantos
Altere os cantos do seu botão para torná-lo mais arredondado ou mais quadrado. Altere o tamanho de todos os cantos juntos, ou personalize cada canto separadamente, clicando nos ícones de bloqueio ou desbloqueio. 
Clique no campo de pixel em um canto e insira o número de pixels que deseja aplicar a ele.
Sombras
Adicione camadas de sombra ao seu botão e personalize a cor, tamanho e mais.
  • Clique na caixa de cores para cada camada de sombra e personalize a cor, tipo, ângulo, tamanho, distância e desfoque. Em seguida, arraste o slider para alterar a opacidade da sombra.
  • Reordene as camadas de sombra arrastando-as para cima e para baixo na lista.
Se estiver usando um botão de upload:
  • Clique na alavanca para ativar as sombras.
  • Utilize os sliders para editar o ângulo, a distância, o tamanho e o desfoque. Em seguida, use o slider e a caixa de cores para editar a opacidade e a cor.
Layout

Altere o layout do seu botão.
  • Clique no dropdown Exibir e escolha se deseja exibir apenas texto, apenas ícone ou ambos.
  • Selecione o alinhamento, posição e espaçamento do texto e/ou ícone (se relevante).
  • Defina o preenchimento em torno do texto e/ou ícone.

Opções de formatação de texto

Opção
Explicação
Como usar
Mostrar texto
Mostre ou oculte texto no seu botão.
Clique na alavanca para mostrar ou ocultar texto no seu botão.
Estilo
Selecione o tema para o texto do botão.
Selecione um tema de texto no menu dropdown.
Fontes
Escolha a fonte para o texto do botão.
Clique no menu dropdown e selecione uma fonte.
Tamanho da fonte
Altere o tamanho do texto no botão.
Arraste o slider para aumentar ou diminuir o tamanho da fonte ou insira um valor.
Formatação de texto
Aplique formatação ao seu texto.
  • Formate seu texto usando as opções: negrito, itálico, sublinhado, riscado, cores, letras maiúsculas e direção e alinhamento do texto.
Espaçamento de caracteres
Altere o espaçamento entre os caracteres de texto.
Arraste o slider para aumentar ou diminuir o espaçamento ou insira um valor.
Sombras
Crie sombras para o seu texto. Você pode colocar mais de uma sombra.
Clique em Adicionar uma sombra para adicionar uma nova. Clique no ícone Personalizar Sombra para fazer seu design.

Opções de design de ícone

Opção
Explicação
Como usar
Mostrar ícone
Mostre ou oculte um ícone em seu botão.
Clique na alavanca para mostrar ou ocultar o ícone no botão.
Tamanho
Altere o tamanho do seu ícone
Arraste o slider para aumentar ou diminuir o tamanho do ícone ou insira um valor.
Cor
Altere a cor do ícone.
Clique na caixa de cor e selecione uma cor.
Rotação
Ajuste a rotação do ícone.
Arraste a alça para personalizar a rotação do ícone ou insira os graus na caixa de texto.

Esse artigo foi útil?

|
Neste artigo
  • Personalizar os estados do botão
  • Fazer o design do botão
  • Glossário de design
  • Opções de design do botão
  • Opções de formatação de texto
  • Opções de design de ícone

Contrate um profissional

Encontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Encontre um Parceiro