As part of our last big platform upgrade in 2018, we migrated away from relying on shortcodes to generate buttons and instead, started using standard text links that only create a simple addition to the HTML in order to convert it into a button.
Note: if you’re an advanced layout and design add-on user, you can use this method, but you have an additional range of options available to you as well.
- Highlight the text you want to appear as the button.
- Select the “Insert Link” button from the toolbar.
- Paste the target URL into the link field.
- Select the blue “Apply” button.
This will give you a nice text link.
- Flip over to “Text” mode.
Now you’ll see the text link in HTML.
All you need to do next is insert class="button" between the opening “a” and the following “href.”
That’s all there is to it. You can flip back to visual mode and go about editing content as normal.
While it still looks like a text link inside the content editor, it will show up as a button to site visitors on the frontend.
Ghost Buttons
One of the most popular style variations is a “ghost” button, which has a transparent background with a border. And when a user hovers, the transparent background fills in.
Setting one up only requires adding “ghost” to the button HTML but you’ll also need to add some CSS to get the styles working. If you’re a Pro user, this is free (just ask us to set it up if it isn’t already) and for all other users, it’s super affordable and we can add several additional styles for you at the same time if you like.
CSS Level Up
Did you know you can create an unlimited number of custom buttons styles using a little CSS? It’s a great way to incorporate secondary CTA colors into buttons that shouldn’t take away primary attention for more important CTAs on the same page.
You can also use CSS to create full or fixed width buttons or buttons with larger font sizes. Here’s an example of a button with larger than usual font size:
.button.large {
font-size: 35px;
}
In order to apply it to a button, you would add “large” to the attribute, like this:
class="button large"