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">
    
    <a href="https://VÁŠ ODKAZ.cz/" id="explosion-button" class="text" target="_blank" rel="noopener noreferrer">
        Exploze!
    </a>
</div> <script type="litespeed/javascript">const textElement=document.getElementById('explosion-button');textElement.addEventListener('click',(e)=>{e.preventDefault();textElement.style.backgroundColor='transparent';textElement.style.border='none';const text=textElement.textContent;textElement.textContent='';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);const angle=Math.random()*2*Math.PI;const distance=Math.random()*100+50;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'});setTimeout(()=>{span.remove()},1000)});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!