Кнопка с частицами

<style>
.sonnetconfettiary {
position: absolute;
width: 4px; /* ← базовый размер частицы (менять тут) */
height: 4px; /* ← базовый размер частицы */
border-radius: 50%; /* ← радиус: 50% = кружочки, 0% = квадратики */
opacity: 0;
pointer-events: none;
z-index: 1000;
}

/* ???? Если использовать картинки вместо цветов */
.sonnetconfetti-imgary {
position: absolute;
width: 20px; /* ← размер картинок */
height: 20px;
opacity: 0;
pointer-events: none;
z-index: 1000;
}
</style>

<script>
(function() {
/* ???? Цвета конфетти — список через запятую */
const TCDcolorStringary = '#FF3B3B, #FFD93B, #3BFF65, #3BD9FF, #A93BFF, #FF6B9A';
const TCDcolorsary = TCDcolorStringary.split(',').map(color => color.trim());

const TCDuseary = false; // true = использовать картинки, false = использовать цвета
const TCDrotary = false; // true = добавлять вращение
const TCDimgStringary = '#000000'; // сюда можно подставить ссылки на картинки
const TCDimgary = TCDimgStringary.split(',').map(url => url.trim());

/* ???? Селектор кнопки — на какую кнопку вешаем эффект */
document.querySelectorAll('.btn-sonneto-primary').forEach(button => {
button.addEventListener('click', function(e) {
const buttonRectary = button.getBoundingClientRect();
const buttonXary = buttonRectary.left + window.scrollX;
const buttonYary = buttonRectary.top + window.scrollY;
const ticlickXary = e.clientX - buttonRectary.left;
const ticlickYary = e.clientY - buttonRectary.top;

/* ???? Количество частиц (80) — можно уменьшить или увеличить */
for (let iary = 0; iary < 80; iary++) {
createConfettiary(buttonXary + ticlickXary, buttonYary + ticlickYary, TCDuseary, TCDrotary);
}
});
});

/* ✨ Создание частицы */
function createConfettiary(x, y, TCDuseary, TCDrotary) {
let sonnetconfettiary;

if (TCDuseary) {
/* ???? Картинка */
sonnetconfettiary = document.createElement('img');
sonnetconfettiary.src = TiCodegetRandomImageary();
sonnetconfettiary.classList.add('sonnetconfetti-imgary');
} else {
/* ???? Цветной кружочек */
sonnetconfettiary = document.createElement('div');
sonnetconfettiary.classList.add('sonnetconfettiary');
sonnetconfettiary.style.backgroundColor = TiCodegetRandomColorary();
}

document.body.appendChild(sonnetconfettiary);

/* ???? Случайный размер частицы */
const tcsizeary = TCDuseary ? 1 : Math.random() * 1 + 5;
/* ↑ "5" = минимальный размер кружочка.
Можно увеличить, например 10–15, если хочешь крупные конфетти. */

sonnetconfettiary.style.width = `${tcsizeary}px`;
sonnetconfettiary.style.height = `${tcsizeary}px`;
sonnetconfettiary.style.left = `${x - tcsizeary / 2}px`;
sonnetconfettiary.style.top = `${y - tcsizeary / 2}px`;

/* ???? Диапазон разлёта (200px) — меняй для большего радиуса */
const destXary = (Math.random() - 0.5) * 200;
const destYary = (Math.random() - 0.5) * 200;

/* ???? Анимация движения */
const keyframesary = [
{ transform: `translate(0, 0)${TCDrotary ? ' rotate(0deg)' : ''}`, opacity: 1 },
{ transform: `translate(${destXary}px, ${destYary}px)${TCDrotary ? ` rotate(${Math.random() * 360}deg)` : ''}`, opacity: 0 }
];

const animationtiary = sonnetconfettiary.animate(keyframesary, {
duration: Math.random() * 1000 + 500, /* ⏱ скорость (500–1500 мс) */
easing: 'ease-out'
});

animationtiary.onfinish = () => sonnetconfettiary.remove();
}

/* ???? Случайный цвет */
function TiCodegetRandomColorary() {
return TCDcolorsary[Math.floor(Math.random() * TCDcolorsary.length)];
}

/* ???? Случайная картинка */
function TiCodegetRandomImageary() {
return TCDimgary[Math.floor(Math.random() * TCDimgary.length)];
}
})();
</script>

<script>
/* ???? Служебный скрипт (можно не трогать) */
(function TCDupdType() {
const TildahtmlBclok = document.currentScript;
if


ildahtmlBclok) {
const recordElement = TildahtmlBclok.closest('.r[data-record-type]');
if (recordElement) {
recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12));
}
}
})();
</script>(T