👉 In this documentation we will teach you step by step how to add a button with a link to the description of your publication. For this we will show you how to create the link, we will share a CSS code to give it style and we will indicate where to add it.
We will create a button that contains a URL. For example " Go to website ":
1. Go to Control Panel > Posts. Choose the post you want the button to display on.
If you haven't uploaded your post yet, here 's a tutorial and shows you how to do it.
2. Position yourself on the post and click Edit .
3. Go to the description box. There you can add the description of your publication, and it is also where we will add the link as we show you below:
a. Type what you want the link to say. For example: " Go to the website ".
b. Select the text:
c. Click the 🔗 icon to insert the link and type the URL. For example " https://mysite.com ":
Click Link and then click Update .
Now your post description will have a link like this:
In the case that you only want to add a link, you will have finished creating it.
If you want it to look like a button or customize it like in the first image, continue with the steps below.
4. Now that we've created the link, let's shape it into a button!
Depending on the plan you have contracted, you must enter the CSS code in different places, but don't worry, it works the same way in both.
Both are configured from Control Panel> Settings> Advanced
In the case that you have the Custom CSS box
You must place the following CSS code:
/* Modal description button*/
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
If you don't have the Custom CSS box we will put the CSS code in Custom before </head> code
You will need to add the additional <style> tag . The code would be:
<style>
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
</style>
Keep in mind that you can modify some values to your liking (alignment, text color, background color, border radius and padding) as long as you have knowledge of CSS 🤓
Click Save .
Ready! We're done and your button now looks like this:
If it was not created correctly or an error occurred, pay attention that you have correctly copied the code as we share it with you.
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .