Button particle explosion

Výsledný vzhled tlačítko s explozí

ID tlačítka:

„particle-explosion-button„

Element HTML v Elementor PRO

Pro vložení kódu použijeme v Elementoru jednoduše element „HTML“.

Není to ovšem podmínkou, s kódem je možné pracovat i v běžném prostředí WordPressu.

-info- Jako u všech kódů na stránkách www.bearhugs.space máte u většiny funkcí popisky s funkcemi, ty je dobré následně vymazat.

Vzhled zápisu HTML a přidaný JavaScript

				
					<div class="button-container">
    <button id="particle-explosion-button" class="button" data-link="https://www.VÁŠ ODKAZ.com">
        Klikněte
    </button>
</div>

<div id="particles"></div>

<script>
    document.getElementById('particle-explosion-button').addEventListener('click', function (e) {
        const button = e.target;
        const particlesContainer = document.getElementById('particles');
        const particlesCount = 30; // Počet částic

        // Získání středu tlačítka
        const rect = button.getBoundingClientRect();
        const buttonCenterX = rect.left + rect.width / 2;
        const buttonCenterY = rect.top + rect.height / 2;

        for (let i = 0; i < particlesCount; i++) {
            const particle = document.createElement('div');
            particle.style.position = 'absolute';
            particle.style.width = '8px';
            particle.style.height = '8px';
            particle.style.borderRadius = '50%';
            particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`; // Náhodná barva
            particle.style.left = `${buttonCenterX}px`;
            particle.style.top = `${buttonCenterY}px`;

            // Animace částic
            const angle = Math.random() * 2 * Math.PI; // Náhodný úhel
            const velocity = Math.random() * 100 + 50; // Rychlost
            const lifetime = Math.random() * 1000 + 500; // Životnost částic

            const deltaX = Math.cos(angle) * velocity;
            const deltaY = Math.sin(angle) * velocity;

            particle.style.transition = `transform ${lifetime}ms ease-out, opacity ${lifetime}ms ease-out`;
            particlesContainer.appendChild(particle);

            // Animace pohybu
            requestAnimationFrame(() => {
                particle.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(0)`;
                particle.style.opacity = '0';
            });

            // Odstranění částice po skončení animace
            setTimeout(() => {
                particle.remove();
            }, lifetime);
        }

        // Otevření odkazu po kliknutí
        const link = button.getAttribute('data-link'); // Získání odkazu z atributu data-link
        if (link) {
            window.open(link, '_blank'); // Otevření odkazu v novém okně
        }
    });
</script>

Vzhled zápisu CSS

				
					/* Kontejner tlačítka */
.button-container {
    display: flex; /* Flexbox pro snadné zarovnání */
    justify-content: center; /* Horizontální zarovnání */
    align-items: center; /* Vertikální zarovnání */
    position: relative; /* Relativní pozice kontejneru */
    width: 200px;
    height: 100px;
    margin: 20px auto; /* Centrované umístění na stránce */
}

/* Tlačítko */
.button {
    position: relative;
    width: 150px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 50px;
    color: #fff;
    background: linear-gradient(45deg, #FF5722, #FFC107);
    border: none;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.button:hover {
    background: linear-gradient(45deg, #FFC107, #FF5722);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.6);
}

/* Particles kontejner */
#particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Zabraňuje interakci */
    overflow: hidden;
    z-index: 0; /* Zajištění, že částice jsou za tlačítkem */
}

/* Styl částic */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none; /* Částice nemohou být kliknuty */
}

Tlačítka jsou velmi významným prvkem webových stránek.

Mají i velmi důležitý význam pro marketingovou strategii, především mají plnit svou základní povinnost, tedy vyzívat k akci. Vychází to i z původního anglického názvu: CTA – call to Action.

Pevně věřím, že Vám některá z tlačítek z našich ukázek pomohou vylepšit Vaši webovou prezentaci.

Ať se Vám daří při tvorbě webu!