Source: https://divicake.com/blog/add-a-clickable-icon-button-to-a-divi-blurb/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to add a clickable icon button to a Divi blurb module? By Divi Cake·28 November 2023·Updated 25 March 2024·3 min read Incorporating an icon button into the 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. Customize Design Settings for Divi Blurb Module](https://divicake.com#step-1-customize-design-settings-for-divi-blurb-module) - [Step 2: Enhance Your Divi Blurb with a Stylish Arrow Icon Button and Hover Effect!](https://divicake.com#step-2-enhance-your-divi-blurb-with-a-stylish-arrow-icon-button-and-hover-effect) - [Now Let’s Add the Custom CSS Code Snippet](https://divicake.com#now-lets-add-the-custom-css-code-snippet) - [Where To Paste The CSS Code](https://divicake.com#where-to-paste-the-css-code) - [Final Result](https://divicake.com#final-result) - [Conclusion:](https://divicake.com#conclusion) Join us in this tutorial as we will guide you through the process of incorporating an icon button into the [Divi Blurb module](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/). This simple addition serves as a clear indicator to users that the blurb is clickable. Together, we’ll make your Divi Blurb modules more engaging and user-friendly. Let’s dive in! ## Step 1. Customize Design Settings for Divi Blurb Module Unleash your creativity by designing and personalizing the style of your [Divi Blurb](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/) just the way you like it. The power is in your hands to make it uniquely yours! If you prefer to adopt our approach, here are the design settings we suggest: - Padding Top: 40px - Padding Bottom: 80px - Padding Left/Right: 30px Divi Blurb Module Design Settings Divi Blurb Module Settings ## Step 2: Enhance Your Divi Blurb with a Stylish Arrow Icon Button and Hover Effect! Let’s talk about the main thing in this tutorial – the icon. We’ll show you how to add it, along with some other cool effects for your [Blurb](https://divicake.com/blog/how-to-increase-the-divi-blurb-content-width/). And guess what? We’re using a simple right-direction arrow from the Divi ETModules font family. It’s like having an easy button for icons – it’s already there, ready for you to put it where you want and make it look just how you like! ## Now Let’s Add the Custom CSS Code Snippet Now, let’s bring in the [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) to give your Blurb those extra effects that the regular [Divi](https://divicake.com/go/elegant-themes-home-page/) settings couldn’t handle. Go to your Divi Blurb module settings, then head to the Advanced tab. In the Custom CSS IDs & Classes toggle, add a custom CSS class named ‘blurb-icon-button’. The CSS code snippet gives your Blurb those extra effects that the regular Divi settings couldn’t handle Adding a Custom CSS Class to the Divi Blurb Module This neat trick ensures that the CSS code we’ll use next will only impact the Blurb modules with that specific class. Ready to make your [Blurb](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) stand out? Let’s do it! .blurb-icon-button { transition: box-shadow .2s ease-in-out; } .blurb-icon-button:after { font-family: ETModules; content: "\24"; font-size: 36px; color: #1a73e8; position: absolute; bottom: 26px; right: 25px; transition: all .2s ease; } .blurb-icon-button:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, .15); transition: box-shadow .2s ease-in-out; } .blurb-icon-button:hover:after { color: #174ea6; bottom: 30px; transition: all .2s ease; } ## Where To Paste The CSS Code Paste the above code in your Divi>Theme Options>Custom CSS code box. By inserting CSS code in the Divi Dashboard, you can tailor the design and behavior of your website components to meet your specific preferences and requirements Adding CSS code to the Divi Dashboard ## Final Result Adding a clickable icon button to the Divi Blurb module, enhance user interaction and engagement Divi Blurb Module with a Clickable Icon Button ## Conclusion: In this tutorial, we’ve empowered you to add a clickable icon button to your [Divi Blurb module,](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/) enhancing user interaction and engagement. By following the simple steps outlined above, you can not only customize the design settings of your Divi Blurb but also elevate it with a stylish arrow icon and a captivating hover effect. To take your Blurb to the next level, we introduced a neat [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) trick, allowing you to seamlessly incorporate additional effects that standard Divi settings might miss. By adding a specific custom class, ‘blurb-icon-button,’ you gain control over the targeted application of CSS code. The provided CSS snippets bring life to your [Blurb](https://divicake.com/blog/how-to-increase-the-divi-blurb-content-width/) with a transition effect, a right-direction arrow icon, and a subtle box shadow on hover. These touches not only enhance visual appeal but also serve as intuitive indicators for users. Now, armed with this newfound knowledge, you’re ready to make your [Divi Blurb modules](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/) stand out and leave a lasting impression on your website visitors. If you have any questions or want to share your experiences, feel free to drop a comment below. Read More: [How To Increase The Divi Blurb Content Width](https://divicake.com/blog/how-to-increase-the-divi-blurb-content-width/) About the author Written by Divi Cake. ## 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 [ 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/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)