Os botões são uma ótima maneira de incentivar os visitantes a interagir com um site. No Editor do Wix Studio, você pode adicionar botões que mostram texto, um ícone ou ambos. Você tem controle total do design e do layout para criar o visual que precisa.
Adicionar um botão
Ao adicionar um novo botão, você pode escolher um design entre duas categorias:
- Botões básicos: esses botões exibem apenas texto e têm uma aparência mais "minimalista".
- Botões estilizados: esses botões podem exibir texto e ícones e oferecer opções de personalização avançadas (por exemplo: backgrounds de imagem, gradientes de cor e muito mais).
Para adicionar um botão:
- Clique em Elementos
no lado esquerdo do editor. - Clique em Botão.
- Navegue pelos designs e arraste um Botão básico ou Botão estilizado para a página.
Personalizar botões básicos
Após adicionar um botão básico, altere seu texto e escolha para onde ele direciona. Uma vez configurado, você pode começar a personalizar o design. Selecione uma cor de preenchimento diferente, adicione sombra e ajuste outras configurações como espaçamento e formatação de texto.
Para personalizar um botão básico:
- Selecione o botão no seu editor.
- Escolha o que você deseja personalizar:
- Clique em Alterar texto.
- Insira o novo texto em Texto do botão.
Dica: os botões básicos não têm a opção de mostrar um ícone, mas você pode inserir símbolos (por exemplo: X, +, >) para criar um efeito semelhante.
Os botões podem direcionar para outras partes do site (por exemplo: páginas, âncoras, janelas), sites externos e até mesmo ações como enviar um email para o seu cliente ou fazer uma ligação para o número dele.
- Clique no ícone Link
. - Selecione um tipo de link à esquerda.
- Adicione as informações relevantes do link.
- Clique em OK.
Você pode adaptar o design de um botão básico para 2 estados diferentes: Normal ou Interativo. Altere configurações como a cor do background, a borda ou a forma dos cantos do botão.
- Clique no ícone Abrir inspetor
no canto superior direito do editor. 
- Role para baixo até Design.
- Selecione o estado que deseja criar: Normal ou Ao passar o mouse.
- Faça o design do botão usando as opções disponíveis:
- Cor e opacidade: altere a cor do background do botão e ajuste sua opacidade.
- Borda: escolha uma cor para a borda e defina sua opacidade e largura (em px*).
- Cantos: defina o raio dos cantos do botão (em px*) para torná-los mais redondos ou quadrados. Você pode definir o mesmo raio para todos os cantos ou clicar no ícone Desbloquear
para personalizá-los separadamente. - Sombra: adicione e personalize uma sombra para dar ao botão um efeito 3D.
- Texto: ajuste a aparência e a formatação do texto do botão.
- Espaçamento: defina o espaçamento entre o texto e as bordas do botão.
Ajustar o layout do botão
Altere o alinhamento, posicionamento e espaçamento do botão para que o texto e/ou ícone fique exatamente como você deseja.
- Clique no ícone Layout
. - Ajuste as configurações conforme necessário:
- Direção: selecione se o botão diz Esquerda para direita ou Direita para esquerda.
- Alinhamento: alinhe o texto à esquerda, ao centro ou à direita do botão. Você pode definir um recuo no texto com as opções Esquerda ou Direita.
Personalizar botões estilizados
Os botões estilizados oferecem muitas opções de personalização para que você possa personalizar cada detalhe. Altere o texto e o ícone para corresponder à ação desejada, escolha como os dois devem ser organizados, defina um gradiente ou uma imagem como background e muito mais.
Para personalizar um botão estilizado:
- Selecione o botão relevante.
- Escolha o que você deseja personalizar:
Alterar o texto e/ou ícone
- Clique em Configurações.
- Selecione uma opção em Escolha o que exibir e altere as configurações:
- Texto e ícone: use o campo Texto para alterar o que aparece e clique no ícone Substituir
para escolher um ícone diferente. - Apenas texto: edite o texto do botão em Texto.
- Apenas ícone: clique no ícone Substituir para escolher um ícone diferente para o botão. Você também pode adicionar um nome acessível para descrever a função do botão para os visitantes usando tecnologias assistivas.
Observação: se você selecionar Nada em Escolha o que exibir, o botão fica em branco. Você ainda pode adicionar um nome acessível e vinculá-lo ao que quiser.
Os botões podem direcionar para outras partes do site (por exemplo: páginas e âncoras), páginas web externas e informações práticas, como o endereço de email do seu cliente.
- Clique no ícone Link .
- Selecione um tipo de link à esquerda.
- Adicione as informações relevantes do link.
- Clique em OK.
Ajustar o layout do botão
Altere o alinhamento, posicionamento e espaçamento do botão para que o texto e/ou ícone fique exatamente como você deseja.
- Clique no ícone Layout .
- Ajuste qualquer uma das seguintes configurações:
- Escolha o que exibir: decida o que é exibido no seu botão: Texto e ícone, Apenas texto, Apenas ícone, ou Nada.
- Posição do ícone: ao escolher mostrar texto e um ícone, você pode decidir como posicioná-los: lado a lado ou um abaixo do outro.
- Alinhamento: alinhe o texto e o ícone à esquerda, ao centro ou à direita do botão. Você também pode alinhá-las às duas margens do botão ao selecionar Ajustar
. - Espaço entre texto e ícone: ao escolher mostrar texto e um ícone, você pode arrastar o slider para definir o espaço entre eles (em px).
- Direção: escolha se o conteúdo do botão é lido da esquerda para a direita ou da direita para a esquerda.
para personalizá-los separadamente.
para personalizá-los separadamente. 
