[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Use and Style the Divi Shortcode Button

Mark Hendriksen | August 7, 2019 | 0 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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.

Adding the Divi shortcode to the blurb module

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

shortcode button options

Add the following line after the URL:

class="short_code"
Add CSS class to the shortcode

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

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment

1 Shares
Share1
Pin
Tweet