Configurable Confetti CTA Button With jQuery - confettiButton.js

File Size: 7.22 KB
Views Total: 7245
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Configurable Confetti CTA Button With jQuery - confettiButton.js

confettiButton.js is a jQuery plugin that adds a configurable, random, click- or hover-triggered confetti effect to call-to-action buttons (or anything else) using CSS3 animations and transforms.

How to use it:

1. Add jQuery library and the jquery.vnm.confettiButton.css & jquery.vnm.confettiButton.js to the html page.

<link href="jquery.vnm.confettiButton.css" rel="stylesheet">
<script src="" 
<script src="jquery.vnm.confettiButton.js"></script>

2. Attach the plugin to a specific element and done.

<button class="btn">Confetti Button</button>



3. Config the confetti effect by overriding the default settings as displayed below:


  // the number of particles
  num: 60,

  // an array of colos
  colorArray: ['#FF5566', '#FFFFFF', '#F1C40F', '#2EBFF6', '#2ECC71'],

  // min/max distances
  minX: 5,
  minY: 5,
  maxX: 120,
  maxY: 120,

  // min/max scale levels
  minScale: 50,
  maxScale: 150,

  // animation speed
  speed: 1,

  // rotate the particles
  rotation: true,

  // appears on a hover event
  hoverOnly: false


This awesome jQuery plugin is developed by indextwo. For more Advanced Usages, please check the demo page or visit the official website.