Neste artigo vamos te mostrar como adicionar um botão que redireciona seus usuários para a URL que você quiser.

👉 Nesta documentação vamos te ensinar passo a passo como adicionar um botão com link na descrição da sua publicação. Para isso, vamos mostrar como criar o link, compartilhar um código CSS para estilizá-lo e indicar onde adicioná-lo.

Vamos criar um botão que contém uma URL. Por exemplo " Ir para o site ":

1. Vá para Painel de Controle > Publicações. Escolha a publicação na qual você quer exibir o botão.

Se você ainda não enviou sua publicação, aqui tem um tutorial que mostra como fazer isso.

2. Posicione-se na publicação e clique em Editar .

3. Vá até a caixa de descrição. É lá que você pode adicionar a descrição da sua publicação, e é também onde vamos adicionar o link como mostramos abaixo:

a. Digite o texto que você quer que o link exiba. Por exemplo: " Ir para o site ".

b. Selecione o texto:

c. Clique no ícone 🔗 para inserir o link e digite a URL. Por exemplo " https://meusite.com ":

Clique em Link e depois em Atualizar .

Agora a descrição da sua publicação terá um link assim:

Caso você queira apenas adicionar um link, você já terá terminado de criá-lo.

Se quiser que fique com a aparência de um botão ou personalizá-lo como na primeira imagem, continue com os passos abaixo.

4. Agora que criamos o link, vamos transformá-lo em um botão!

Dependendo do plano que você contratou, você deve inserir o código CSS em locais diferentes, mas não se preocupe, o funcionamento é o mesmo nos dois casos.

Ambos são configurados em Painel de Controle > Configurações > Avançado

• No caso de você ter a caixa CSS Personalizado

Você deve inserir o seguinte código CSS:

/* Botão de descrição do modal */
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}

• Se você não tiver a caixa CSS Personalizado, vamos colocar o código CSS em Custom before code

Você precisará adicionar a tag adicional. O código ficaria assim:

<style>
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}

</style>