Confetti Effect When Clicking a Divi Button Module




Looking to sprinkle some excitement on your Divi Button Module interactions? Here’s a charming tweak for you!

With this Divi Code Snippet, you can easily integrate a lively confetti effect into your Divi Button Module. Whenever a user clicks on a button labeled with the .confetti-button class, they’re greeted with a vibrant shower of confetti particles. This addition not only brings a burst of color and joy but also significantly enhances user engagement on your Divi-themed website. It’s an ideal way to add an element of fun and create an unforgettable interactive experience for your users!

Just add the code below and the .confetti-button class to your button on the Advanced Tab.

Snippets Demo

Demo of Confetti Effect When Clicking a Divi Button Module



This code loads the confetti.browser.js library.

Language: Javascript

Where to add: Divi Code Module

                        <script src="[email protected]/dist/confetti.browser.js"></script>

This code first adds a .confetti-button class to the submit button of the Divi Contact Form Module using Javascript and then listens for a click on the Submit Button. When a click is detected, it then uses the library we loaded to show the confetti when clicked.

Language: Javascript

Where to add: Divi Code Module

// Listens for the 'DOMContentLoaded' event to ensure the HTML is fully loaded before running the script.
document.addEventListener('DOMContentLoaded', function() {

  // Selects the first element with the class '.confetti-button' as the target button.
  const button = document.querySelector('.confetti-button');  // You can change the class, just make sure it is defined in the module also.  

  // Adds an event listener for the 'click' event on the targeted button.
  button.addEventListener('click', function(event) {
    // Retrieves the position and size of the button to calculate where the confetti should appear.
    const rect = button.getBoundingClientRect();

    // Calculates the horizontal (x) center of the button.
    const x = (rect.left + rect.right) / 2;

    // Calculates the vertical (y) center of the button.
    const y = ( + rect.bottom) / 2;

    // Configures the settings for the confetti effect.
    const confettiSettings = {
      particleCount: 100, // Defines the number of confetti particles.
      spread: 70,         // Sets the spread angle of the confetti.
      // Specifies the origin point for the confetti effect based on the button's location.
      origin: { x: x / window.innerWidth, y: y / window.innerHeight }

    // Triggers the confetti effect with the defined settings when the button is clicked.

Related Snippets

Explore more from Divi Engine