Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jun 11, 2021
Embed
What would you like to do?
Particle Button
<div class="btn-contain">
<button class="btn">Click Me!</button>
<div class="btn-particles">
</div>
</div>
$.fn.boom = function(e) {
var colors = [
'#ffb3f6',
'#7aa0ff',
'#333',
// '#FFD100',
// '#FF9300',
// '#FF7FA4'
];
var shapes = [
'<polygon class="star" points="21,0,28.053423027509677,11.29179606750063,40.97218684219823,14.510643118126104,32.412678195541844,24.70820393249937,33.34349029814194,37.989356881873896,21,33,8.656509701858067,37.989356881873896,9.587321804458158,24.70820393249937,1.0278131578017735,14.510643118126108,13.94657697249032,11.291796067500632"></polygon>',
// '<path class="circle" d="m 20 1 a 1 1 0 0 0 0 25 a 1 1 0 0 0 0 -25"></path>',
'<polygon class="other-star" points="18,0,22.242640687119284,13.757359312880714,36,18,22.242640687119284,22.242640687119284,18.000000000000004,36,13.757359312880716,22.242640687119284,0,18.000000000000004,13.757359312880714,13.757359312880716"></polygon>',
'<polygon class="diamond" points="18,0,27.192388155425117,8.80761184457488,36,18,27.19238815542512,27.192388155425117,18.000000000000004,36,8.807611844574883,27.19238815542512,0,18.000000000000004,8.80761184457488,8.807611844574884"></polygon>'
];
var btn = $(this);
var group = [];
var num = Math.floor(Math.random() * 50) + 30;
for(i = 0; i < num; i++) {
var randBG = Math.floor(Math.random() * colors.length);
var getShape = Math.floor(Math.random() * shapes.length);
var c = Math.floor(Math.random() * 10) + 5;
var scale = Math.floor(Math.random() * (8 - 4 + 1)) + 4;
var x = Math.floor(Math.random() * (150 + 100)) - 100;
var y = Math.floor(Math.random() * (150 + 100)) - 100;
var sec = Math.floor(Math.random() * 1700) + 1000;
var cir = $('<div class="cir"></div>');
var shape = $('<svg class="shape">'+shapes[getShape]+'</svg>');
shape.css({
top: e.pageY - btn.offset().top + 20,
left: e.pageX - btn.offset().left + 40,
'transform': 'scale(0.'+scale+')',
'transition': sec + 'ms',
'fill': colors[randBG]
});
btn.siblings('.btn-particles').append(shape);
group.push({shape: shape, x: x, y: y});
}
for (var a = 0; a < group.length; a++) {
var shape = group[a].shape;
var x = group[a].x, y = group[a].y;
shape.css({
left: x + 50,
top: y + 15,
'transform': 'scale(0)'
});
}
setTimeout(function() {
for (var b = 0; b < group.length; b++) {
var shape = group[b].shape;
shape.remove();
}
group = [];
}, 2000);
}
$(function() {
$(document).on('click', '.btn', function(e) {
$(this).boom(e);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
html, body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
background: #F3F7FF;
}
.shape {
position: absolute;
width: 50px;
height: 50px;
transform: scale(0.8);
}
.cir {
position: absolute;
border-radius: 50%;
z-index: 5;
}
.btn-contain {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 4px;
background: #333;
text-align: center;
z-index: 10;
transition: 0.2s;
cursor: pointer;
color: #fff;
box-shadow: 0px 1px 5px 2px #BFCEEF;
}
.btn:active, .btn:hover, .btn:focus {
outline: none !important;
color: white;
}
.btn-particles {
width: 100px;
height: 100px;
position: absolute;
border-radius: 50%;
color: #eee;
font-family: monospace;
z-index: 5;
/* filter: url(#gooeyness); */
}
.btn:active {
transform: scale(0.9) translate(-55%, -55%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment