Source: https://divicake.com/blog/how-to-add-a-button-to-a-divi-blurb-module/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How To Add A Button To A Divi Blurb Module By Divi Cake·27 November 2023·Updated 19 August 2026·4 min read How To Add A Button To A Divi Blurb Module We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Create a Blurb Module](https://divicake.com#step-1-create-a-blurb-module) - [Step 2: Add A Span Tag To The Blurb Content](https://divicake.com#step-2-add-a-span-tag-to-the-blurb-content) - [3rd Step: Customize the Button](https://divicake.com#3rd-step-customize-the-button) - [Button URL](https://divicake.com#button-url) - [Custom CSS Class](https://divicake.com#custom-css-class) - [Button Text](https://divicake.com#button-text) - [4th Step: Style The Blurb Button With CSS](https://divicake.com#4th-step-style-the-blurb-button-with-css) - [Blurb Module After Adding the Button](https://divicake.com#blurb-module-after-adding-the-button) - [Conclusion:](https://divicake.com#conclusion) Adding a button to a [Divi Blurb module](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) can be really useful, especially when the Blurb’s style doesn’t let you add a separate Button module. To make it happen, we’ll use a basic HTML link and some CSS right inside the Blurb module’s text area. In this quick guide, we’ll show you how to link up your Divi Blurb and make it look like a button. ## Step 1: Create a Blurb Module To begin, place the [Divi Blurb module](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/) in your layout and make it your own by adding the image you like, the title text, and the body text. Once you’ve got that part sorted, let’s move on to the fun stuff – adding a button to your Blurb! ## Step 2: Add A Span Tag To The Blurb Content Now, let’s tackle the second step. To do this, you’ll need to insert a “span” tag into the Body Text section of your [Divi Blurb module](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/). Here’s how to get it done: - Access the Blurb module settings. - Scroll down to the “Body” text area. - Switch from the default “Visual” tab to the “Text” tab. Think of this tab as your code editor space, where you can work with HTML. Accessing the body text area of the Divi Blurb Module to insert the span tag Blurb Module Setting It’s time to take the next step. Copy the following span tag and simply paste it into the Blurb Body text area. Here’s how to do it: Read More Inserting the span tag into the Blurb Body text area Inserting the span tag ## 3rd Step: Customize the Button Inside the span tag, you’ll find three important elements: Button URL, [Custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) Class, and Button Text. The good news is, that you can personalize and customize each of these as described below. ### Button URL In the span tag, the initial component is the “a href” part, which serves as the anchor link. This link determines where the button will take your website visitors when they click on it. Right now, it’s represented by a “#” symbol as a placeholder, but it’s crucial to replace that with your specific web address enclosed within the quotation marks (“”). In the span tag, the initial component is the “a href” part, which serves as the anchor link Button Url of the Span Tag Read More: [Adding a Scroll Down Hover Effect in Divi Website – Step-by-Step Guide](https://divicake.com/blog/divi-scroll-down-hover-effect-guide/) ### Custom CSS Class Now, moving on to the second segment of the span tag - the [custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) class. We’ve included a special class known as “blurb-button” to pinpoint the link and apply styling that transforms it into a button, giving it a familiar button-like appearance. The custom CSS class to pinpoint the link and apply styling that transforms it into a button. Custom CSS Class ### Button Text Lastly, let’s talk about the third element in the span tag – the text that appears on the button. For now, we’ve put a temporary label of “Read Here,” but it’s essential to customize this text to make it fit your needs. Simply replace the text found within the quotation marks (“”) with your preferred button label. The text that appears on the button Button Text Read More: [How To Create a Blog or News Website with Divi](https://divicake.com/blog/divi-blog-news-website-creation/) ## 4th Step: Style The Blurb Button With CSS Let’s make those Blurb links look like actual buttons – a simple [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) tweak will do the trick. Since we’ve already set up the custom CSS class, we can now focus on targeting it in the code and applying the desired styling values. It’s all about customizing your buttons to stand out the way you want. Paste the following code in your Divi>Theme Options>Custom CSS code box. a.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.blurb-button:hover { background: transparent; color: #0070fc; border: 2px solid #0070fc; cursor: pointer; transition: all 0.3s ease-in-out; } ## Blurb Module After Adding the Button You can make your Blurb more interesting and interactive by adding a button to it. Blurb Module After adding button Go ahead and personalize the CSS to match your website’s style. Think of this as a starting point, and you can modify it to suit your preferences. Just remember, if you want different button styles for various [Blurb modules](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/), make sure to adjust the CSS in both the span tag and the overall CSS to keep everything coordinated. This ensures each Blurb module has its distinct button style. ## Conclusion: Nice job on adding a button to your [Divi Blurb module](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/)! You’ve made your Blurb more interesting and interactive with just a few steps. Remember, what you did is like the beginning of a painting—there’s more you can do to make it uniquely yours. As you keep working on your website, feel free to adjust the button’s look to match your style. Think of it as coloring in a coloring book—make it suit your taste! The cool part is, you can make each Blurb module stand out by giving it its own special button style. Don’t be afraid to play around and customize it according to your needs. And if you ever want different buttons for different [Blurbs](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/), just make sure to tweak the settings in both the span tag and the overall CSS. That way, your website looks polished and cool. Read More: [Replace the Divi Blurb Icon With a Font Awesome Icon: A Step-by-step Guide](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)