Buttons 2 interactive particles

Výsledný vzhled tlačítek s částicemi

ID tlačítek:

„interactive-particles-button-1“ & „interactive-particles-button-2„

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">
    <!-- Tlačítka s odkazy -->
    <button id="interactive-particles-button-1" class="button" data-link="https://www.VÁŠ ODKAZ 1.com">
        Tlačítko 1
    </button>
    <button id="interactive-particles-button-2" class="button" data-link="https://www.VÁŠ ODKAZ 2.com">
        Tlačítko 2
    </button>
</div>

<div id="particle-container"></div>

<script>
    // Funkce pro vytvoření částice
    function createParticle(x, y, container) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = `${x}px`;
        particle.style.top = `${y}px`;

        // Náhodná velikost a barva částice
        const size = Math.random() * 10 + 5;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.background = `hsl(${Math.random() * 360}, 100%, 70%)`;

        // Náhodná rychlost a směr
        const velocityX = (Math.random() - 0.5) * 4;
        const velocityY = (Math.random() - 0.5) * 4;

        particle.velocityX = velocityX;
        particle.velocityY = velocityY;

        container.appendChild(particle);

        // Animace částice
        function animateParticle() {
            const rect = particle.getBoundingClientRect();
            particle.style.left = `${rect.left + particle.velocityX}px`;
            particle.style.top = `${rect.top + particle.velocityY}px`;

            // Odrážení od okrajů obrazovky
            if (rect.left <= 0 || rect.right >= window.innerWidth) {
                particle.velocityX *= -1;
            }
            if (rect.top <= 0 || rect.bottom >= window.innerHeight) {
                particle.velocityY *= -1;
            }
        }

        // Animace částice pomocí requestAnimationFrame
        const animationInterval = setInterval(() => {
            animateParticle();
        }, 16);

        // Odstranění částice po 2 sekundách
        setTimeout(() => {
            clearInterval(animationInterval);
            particle.remove();
        }, 2000);
    }

    // Přidání částicové interakce pro tlačítka
    document.querySelectorAll('.button').forEach((button) => {
        // Generování částic při pohybu myši nad tlačítkem
        button.addEventListener('mousemove', (e) => {
            const rect = button.getBoundingClientRect();
            const x = e.clientX;
            const y = e.clientY;
            createParticle(x, y, document.getElementById('particle-container'));
        });

        // Otevření odkazu při kliknutí na tlačítko
        button.addEventListener('click', () => {
            const link = button.getAttribute('data-link');
            if (link) {
                window.open(link, '_blank'); // Otevření odkazu v novém okně
            }
        });
    });
</script>

Vzhled zápisu CSS

				
					/* Kontejner pro tlačítka */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px; /* Rozestup mezi tlačítky */
    margin-top: 50px;
}

/* Styl tlačítek */
.button {
    position: relative;
    width: 150px; /* Šířka tlačítka */
    height: 150px; /* Výška tllačítka */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 50px;
    color: #fff; /* Barva písma */
    background: linear-gradient(45deg, #4CAF50, #FFC107); /* Barva a přechod na  pozadí */
    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;
}
/* Styl tlačítka při najetí myši */
.button:hover {
    background: linear-gradient(45deg, #FFC107, #4CAF50);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.6);
}

/* Kontejner částic */
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Styl částic */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

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!