Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add A Button To A Divi Blurb Module

Nelson Miller Profile Orange
This tutorial will show you how to add a link to a Divi Blurb module and style it as an attractive and functional button.

▶️ Please watch the video above to get all the exciting details! 👆

Add A Span Tag To The Blurb Content

The first step is to add a span tag to the Body Text area of the Divi Blurb module. So open up the Blurb module settings and go down to the “Body” text area. Make sure you go to the “Text” tab, which is next to the default “Visual” tab. The Text tab means HTML, so this tab is like a code editor area.

adding a button to a Divi Blurb module in HTML tab

Now go ahead and copy the span tag below and paste it into into the Blurb Body text area.

<span><a href= "#" class="pa-blurb-button">Click Here</a></span>

It should now look like this:

adding a button link to a Divi Blurb module with a span tag

Be sure to watch the video to see how this all works in a live demonstration. It is very easy to do, and you can repeat this step multiple times for any number of Blurb modules.

This span tag contains three things:

  • Button URL
  • Custom CSS Class
  • Button Text

Button URL

The first part of the span tag is the “a href” which is the anchor link. This is the URL link for the button. The placeholder “#” is used, but you neeed to repalce that with your own link inside the “” quote symbols.

Custom CSS Class

The second part of the span tag is a custom CSS class. We added this class called “pa-blurb-button” in order to target the link and style it to look like a regular button.

Button Text

The third part of the span tag is the text for the button. We have added a placehold of “Click Here” but obviously you would want to change that. Just carefully change the text between the “” quote symbols.

Style The Blurb Button With CSS

Now you have added the links to your Blurb, but most likely you want these too look like buttons. We can do this easily with some CSS. Since we have already added the custom CSS class, we just need to target that in the code and add our values. 

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*style the Divi Blurb link as a button*/

a.pa-blurb-button {
	color: #ffffff;
	background: #0071fc;
	border: 2px solid #0070fc;
	padding: .7em 1.3em;
	margin-top: 20px;
	border-radius: 50px;
	text-transform: capitalize;
	display: inline-block;
	transition: all 0.3s ease-in-out;
}


/*style the Divi Blurb link text as a button on hover*/

a.pa-blurb-button:hover {
	background: transparent;
	color: #0070fc;
	border: 2px solid #0070fc;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

This obviously can be fully customized to your own values to match your website style, but this gives you an example to use as a base.

Keep in mind that if you want to use a different button style on different blurb modules, then you would need to change the CSS both in the span tag and in the CSS to match.

Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

32 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Comments By Others

  1. Oida

    Thank you very much for the tutorial.
    I would like to display the button without a link, using the Modul-Link of Divi to link the whole blurb.
    Also I would like to do, as Dion mentioned:
    I have blurbs with different text length. How do I ensure that the button is in the exact same place on all blurbs?

    Any ideas, how I could do that?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Oida,
      Sure, you can display the button without a link, that’s totally up to you. I don’t know of any way to make the button aligned to the bottom. The button is placed in the Blurb body text area, so the body text will determine that.

      Reply
  2. Jan van t Ende

    Hi Nelson,

    First off all: Great Tutorial.

    I have the same question as Sean (2nd comment from above)

    I have 3 blurbs in 1 row with different text lengths.
    so the buttons are at different distances from the bottom.

    How do I get this at an equal distance from the bottom (Horizontally at the same height)

    Greetings Jan

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Jan!

      Please make sure the equalize column height option is enabled in the row settings. After that, add the class pa-blurb in thee Blurb modules settings > Advanced > CSS class.

      Then add the following code:

      a.pa-blurb-button{
      position: absolute;
      bottom: 0;
      }

      .pa-blurb, .pa-blurb .et_pb_blurb_description, .pa-blurb .et_pb_blurb_container, .pa-blurb .et_pb_blurb_content{
      height: 100%;
      }

      Hope it helps!

      Reply
      • Garry

        Actually, nevermind, I found a fix, here the code for others:
        /*style the Divi Blurb link text as a button on hover*/

        a.pa-blurb-button:hover {
        background: transparent;
        color: #98C864;
        border: 2px solid #98C864;
        transition: all 0.3s ease-in-out;
        }
        a.pa-blurb-button{
        position: absolute;
        bottom: 1;
        }

        .pa-blurb, .pa-blurb .et_pb_blurb_description, .pa-blurb .et_pb_blurb_container, .pa-blurb .et_pb_blurb_content{
        height: 99%;
        }

      • Jan van t Ende

        It didn’t help. Thanks anyway

  3. Sanne

    Hi,

    Is it possible to change the text on the button when hoovering? I want to go from “>” to “read more” when hoovering?

    Reply
  4. Mike

    Hello,

    Thank you for your solution. Do you know how to horizontally center the button ?

    Reply
  5. Shane

    Thanks, Nelson it works great, I also added a second class to make some of the widths of the button longer as some of the button’s text has shorter text characters.

    Reply
  6. Joel

    Quality content

    Reply
  7. Martika

    Hello!

    Thank you for this video. What if you wanted the buttons next to each other. I’m using this code for an accordion section.

    Thank you so much for your help on this!

    Reply
  8. dozza

    On the css, i think you mean”

    text-transform: uppercase;

    and not

    text-transform: capitalize;

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Dozza,

      Both of these are a valid CSS properties, in uppercase, all the alphabets will be capitalized and in capitalize only the first alphabet of the word will be capitalized.

      Reply
  9. Dick Ockers

    Nelson, you are great. This is the solution I needed!
    Thank you so very much. Stay blessed!

    Reply
  10. Sean

    In a row of multiple blurbs, how could we align the new buttons at the bottom of each blurb?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Could you please elaborate the question a little more as right now the problem is not clear to me?

      I guess the buttons are already aligned at the bottom of each blurb only.

      Reply
      • Dion

        I think Sean’s request means that if you have multiple blurbs with different text length, how do you ensure that the button is in the exact same place on all blurbs. I.e. set the same blurb height for all or calculate the maximum height of all blurbs in a row.

  11. Adham Elias Botrous

    Great,
    Is there anyway to apply a preset on that button (by adding a specific class or id)? 
    The Situation: I already have few presets for buttons. Can I apply one of them on that button? So if the preset changed then also the button will be change.

    Thanks

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Adham,
      Well this is not a real button module, so unfortunately no. The CSS class though can act as your preset and you can just change it once and it would update anywhere you have this.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart