How to Use and Style the Divi Shortcode Button

Maybe you didn’t even realize but Divi still does have some shortcodes that you can use, and one of them is the Divi button shortcode.  You can use these shortcodes from within modules with a text field. I use it from time to time for the blurb module. The blurb module doesn’t have an option for a button. But with the button shortcode, you can still add a button.

In this tutorial, I will be explaining how you can add a button with a shortcode and how you can style this button.

Step 1: Adding the Divi shortcode button

We are going to add the button shortcode to a blurb module. You cannot do this from the visual builder the option isn’t there anymore. You need to edit your page from the backend with the classic editor.

In the blurb module text field, you will find the option Add ET Button.

In the popup that you get you can fill in a link for your button, you can set a predefined size and color. In the content field, you can fill in the button text, for example, Read more.

In this tutorial we are going to style the button with CSS, for that the settings for type and color need to be:

Type: Small
Color: Blue

Add the following line after the URL:

class="short_code"

Step 2: Styling the shortcode button with CSS

Add the following CSS in Divi > Theme Options > CSS

.smallblueshort_code {
    background-color: #7127a9;
    color: #fff;
    border-radius: 5px !important;
    padding: 7px 20px !important;
    font-size: 14px !important;
}

.smallblueshort_code:hover {
    background-color: #4c1675;
}

In line 2 you can change the background color.
In line 3 you can change the text color.
In line 4 you can change the border radius size.
In line 5 you can change the padding.
In line 6 you can change the font-size.
In line 10 you can change the background color on hover.

And that is how you can use a shortcode button in Divi. If you want to create some creative button then check out my tutorial “How to create a beautiful Divi button“