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 type="litespeed/javascript">document.getElementById('particle-explosion-button').addEventListener('click',function(e){const button=e.target;const particlesContainer=document.getElementById('particles');const particlesCount=30;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%)`;particle.style.left=`${buttonCenterX}px`;particle.style.top=`${buttonCenterY}px`;const angle=Math.random()*2*Math.PI;const velocity=Math.random()*100+50;const lifetime=Math.random()*1000+500;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);requestAnimationFrame(()=>{particle.style.transform=`translate(${deltaX}px, ${deltaY}px) scale(0)`;particle.style.opacity='0'});setTimeout(()=>{particle.remove()},lifetime)}
const link=button.getAttribute('data-link');if(link){window.open(link,'_blank')}})</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!