Genesis - How to add buttons anywhere on your site

Buttons are useful for displaying prominent links on your website. In this tutorial we'll show you how to easily add custom buttons anywhere on your website!

Example of two buttons side by side

How to add buttons on your site

1. Copy the following code snippet:

<a class="button" href="YOUR PAGE URL">Button Text</a>

2. Paste the code snippet in any text/code editor on your website – post, page, html widget, etc.

3. Replace YOUR PAGE URL with the URL of the page you want to link to (i.e. https://yourwebsite.com/services). Be sure to keep the quotation marks around your URL.

4. Replace Button Text with the text you would like your button to say (i.e. Our Services).

5. Save, and you're done!

Using Gutenberg?

If you'd like to add a button to a Gutenberg-based page or post, there are a couple of easy ways.

Alternate Button Options

Centered button:

<div align="center"><a class="button" href="YOUR PAGE URL">Button Text</a></div>

Button with a specific background color:

<a class="button" style="background: #000000 !important; color: #ffffff !important;" href="YOUR PAGE URL">Button Text</a>

You can replace 000000 with your desired background color, and ffffff with your desired text color for the button.

Background + centered:

<div align="center"><a class="button" style="background: #000000 !important; color: #ffffff !important;" href="YOUR PAGE URL">Button Text</a></div><br>