Ever wanted to add some luminosity to your links? Brashness to your buttons? Clinquant to your CTA? Or some glitz & glamour to anything else, for that matter? Then you need to get you some CONFETTI.
Confetti Button is a teeny little (1.02kb minified) plugin that you can call against any DOM element (although smaller things like buttons & image containers tend to work best) to instantly add a fizzy flume of confetti. It's as simple as:
$('.button').confettiButton();
Does it have to be a button though? NOPE. It can be applied to any DOM element that is a containing element; so you can use it on a button, div,
a, label or anything else that can contain other elements. The only things you can't immediately use it on (without some extra markup, at least) are non-containing or
self-closing elements. These include img, input, hr, br and embed.
If you want to use Confetti Button on a self-closing element, I recommend wrapping it in a containing element (like a div) and applying $.confettiButton to that.
Confetti Button also accepts an object of optional parameters for controlling the amount of confetti, the colours, the scale, the amount of distance to cover, the speed, rotation and whether to only appear on hover. For example:
$('.button').confettiButton({
num: 120,
colorArray: ['#BDC3C7', '#2C3E50'],
speed: 2,
maxX: 300,
maxY: 300
});
Below are some handy examples of the plugin in action. As mentioned, you don't have to use Confetti Button on just buttons (as you can see below) - you can use it on any containing element to instantly get a neat confetti effect.
$('.button').confettiButton({
hoverOnly: true
});
$('.green-button').confettiButton({
colorArray: ['#2ECC71'],
});
$('.rgba-button').confettiButton({
colorArray: ['rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.3)'],
});
colorArray parameter will accept any valid CSS background-color values, including RGBA.
$('.large-button').confettiButton({
minScale: 200,
maxScale: 400
});
$('.slow-button').confettiButton({
speed: 6
});
div with a background image
At a minimum, Confetti Button requires jQuery 1.6.0 to be included, and the accompanying CSS stylesheet to be included within your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.vnm.confettiButton.min.js"></script>
<link rel="stylesheet" href="jquery.vnm.confettiButton.css" type="text/css" media="screen" />
The CSS defines the basics of the confetti and the transitions. It can be modified to adjust the default size & shape of the confetti, position of the container, etc.
num (int) The number of confetti bits to generate. Defaults to 60.
colorArray (array) Array of background-color values to use. Accepts any CSS-valid value, and they can be mixed.
Defaults to ['#FF5566', '#FFFFFF', '#F1C40F', '#2EBFF6', '#2ECC71'].
minX (int) The minimum distance, in pixels, of travel on the x-axis for any piece of confetti. As long as this value resolves to a real number
(e.g. $('.element').offset().top), it will be accepted. Defaults to 5.
minY (int) The minimum distance, in pixels, of travel on the y-axis for any piece of confetti. As long as this value resolves to a real number,
it will be accepted. Defaults to 5.
maxX (int) The maximum distance, in pixels, of travel on the x-axis for any piece of confetti. As long as this value resolves to a real number,
it will be accepted. Defaults to 120.
maxY (int) The maxmimum distance, in pixels, of travel on the y-axis for any piece of confetti. As long as this value resolves to a real number,
it will be accepted. Defaults to 120.
speed (float) The base speed of travel for confetti. The speed of any individual piece is calculated randomly with this value as a basis; so, the
higher the number, the slower the rate of travel. Defaults to 1.
rotation (bool) Whether the pieces will be randomly rotated. Assuming they are square, the rotation is anywhere from 0-90°. Defaults to
true.
hoverOnly (bool) Whether the confetti will only appear on a hover event. Defaults to false.
(This interaction can always be controlled manually, if you want to get your hands dirty with the CSS)
As Confetti Button is predominantly CSS-based, you can control a lot of how it works simply by modifying the CSS. For example, by default the confetti bits are square. To make them round, you just add:
.vnm-confetti .confetto {
border-radius: 50%;
}