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">
    
    <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 type="litespeed/javascript">function createParticle(x,y,container){const particle=document.createElement('div');particle.className='particle';particle.style.left=`${x}px`;particle.style.top=`${y}px`;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%)`;const velocityX=(Math.random()-0.5)*4;const velocityY=(Math.random()-0.5)*4;particle.velocityX=velocityX;particle.velocityY=velocityY;container.appendChild(particle);function animateParticle(){const rect=particle.getBoundingClientRect();particle.style.left=`${rect.left + particle.velocityX}px`;particle.style.top=`${rect.top + particle.velocityY}px`;if(rect.left<=0||rect.right>=window.innerWidth){particle.velocityX*=-1}
if(rect.top<=0||rect.bottom>=window.innerHeight){particle.velocityY*=-1}}
const animationInterval=setInterval(()=>{animateParticle()},16);setTimeout(()=>{clearInterval(animationInterval);particle.remove()},2000)}
document.querySelectorAll('.button').forEach((button)=>{button.addEventListener('mousemove',(e)=>{const rect=button.getBoundingClientRect();const x=e.clientX;const y=e.clientY;createParticle(x,y,document.getElementById('particle-container'))});button.addEventListener('click',()=>{const link=button.getAttribute('data-link');if(link){window.open(link,'_blank')}})})</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!