Button explosion

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

ID tlačítka:

„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="exploding-text-container">
    <!-- Textový prvek s ID explosion-button -->
    <a href="https://VÁŠ ODKAZ.cz/" id="explosion-button" class="text" target="_blank" rel="noopener noreferrer">
        Exploze!
    </a>
</div>

<script>
    // Získání textového prvku
    const textElement = document.getElementById('explosion-button');

    textElement.addEventListener('click', (e) => {
        e.preventDefault(); // Zabránění okamžitému přesměrování po kliknutí

        // Skrýt pozadí a rámeček při kliknutí
        textElement.style.backgroundColor = 'transparent'; // Zrušení pozadí
        textElement.style.border = 'none'; // Zrušení rámečku

        const text = textElement.textContent;
        textElement.textContent = ''; // Vymazání původního textu

        // Vytvoření jednotlivých znaků jako elementy
        text.split('').forEach((letter) => {
            const span = document.createElement('span');
            span.textContent = letter;
            span.style.position = 'relative';
            span.style.display = 'inline-block';
            span.style.transform = 'translate(0, 0)';
            span.style.transition = `transform 1s ease, opacity 1s ease`;
            textElement.appendChild(span);

            // Animace písmen směrem ven
            const angle = Math.random() * 2 * Math.PI; // Náhodný směr
            const distance = Math.random() * 100 + 50; // Náhodná vzdálenost
            const deltaX = Math.cos(angle) * distance;
            const deltaY = Math.sin(angle) * distance;

            requestAnimationFrame(() => {
                span.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
                span.style.opacity = '0';
            });

            // Odstranění písmen po animaci
            setTimeout(() => {
                span.remove();
            }, 1000);
        });

        // Přesměrování na odkaz po dokončení animace
        setTimeout(() => {
            window.open('https://bearhugs.space/tlacitka/', '_blank');
        }, 1000);
    });
</script>

Vzhled zápisu CSS

				
					/* Kontejner pro text */
/* Zajišťuje umístění textu na střed a základní styl */
.exploding-text-container {
    display: flex; /* Flexbox pro zarovnání obsahu */
    justify-content: center; /* Horizontální zarovnání na střed */
    align-items: center; /* Vertikální zarovnání na střed */
    height: 200px; /* Výška kontejneru */
    font-family: Arial, sans-serif; /* Styl písma */
    font-size: 36px; /* Velikost písma */
    font-weight: bold; /* Tučné písmo */
    color: #b10000; /* Barva textu */
    cursor: pointer; /* Ukazatel na tlačítko */
    overflow: hidden; /* Skrytí přesahujících částí */
}

/* Stylování pro text */
/* Základní vzhled textu a přechody */
.text {
    position: relative; /* Relativní pozice pro efekty */
    display: inline-block; /* Blokový prvek uvnitř textu */
    text-align: center; /* Zarovnání textu na střed */
    color: #b10000; /* Barva textu */
    transition: all 0.3s ease-in-out; /* Přechod pro efekty při hover */
}

/* Hover efekt pro text */
/* Přidání šedého pozadí a červeného okraje při najetí myší */
.text:hover {
    background-color: rgba(128, 128, 128, 0.2); /* Lehké šedé pozadí */
    border: 2px solid #b10000; /* Červený okraj */
    color: #b10000; /* Barva textu při hover */
    padding: 5px; /* Přidání prostoru uvnitř okraje */
    border-radius: 5px; /* Mírné zaoblení okrajů */
}

/* Kliknutí na text */
/* Stylizace, kdy se pozadí a rámeček při kliknutí skryjí */
.text:active {
    background-color: transparent; /* Skrytí pozadí */
    border: none; /* Skrytí rámečku */
    color: #b10000; /* Barva textu zůstává */
}

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!