Button glowing

Výsledný vzhled tlačítko se světelným efektem

ID tlačítka:

„glowing-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">
    <!-- Tlačítko s glow efektem -->
    <button id="glowing-button" class="button" data-url="https://www.VÁŠ ODKAZ.com">
        Klikněte zde
    </button>
</div>

<script>
    // Event listener pro kliknutí na tlačítko
    document.getElementById('glowing-button').addEventListener('click', function () {
        // Získání cílové URL z atributu data-url
        const url = this.getAttribute('data-url');
        if (url) {
            window.location.href = url; // Otevření odkazu ve stejném okně
        }
    });
</script>

Vzhled zápisu CSS

				
					/* Kontejner tlačítka */
.button-container {
    display: flex; /* Uspořádání pomocí Flexboxu */
    justify-content: center; /* Horizontální zarovnání na střed */
    align-items: center; /* Vertikální zarovnání na střed */
    width: 100%; /* Šířka kontejneru */
    height: 300px; /* Výška kontejneru */
    position: relative; /* Relativní pozice kvůli absolutním prvkům */
}

/* Styl tlačítka */
.button {
    position: relative; /* Relativní pozice pro použití pseudo-elementů */
    display: flex; /* Flexbox pro zarovnání textu */
    justify-content: center; /* Horizontální zarovnání textu */
    align-items: center; /* Vertikální zarovnání textu */
    width: 200px; /* Šířka tlačítka */
    height: 60px; /* Výška tlačítka */
    font-size: 18px; /* Velikost písma */
    font-weight: bold; /* Zvýraznění textu */
    color: #fff; /* Barva textu */
    text-transform: uppercase; /* Text velkými písmeny */
    background: linear-gradient(30deg, #0f2027, #203a43, #2c5364); /* Základní tmavý gradient */
    border: none; /* Bez okrajů */
    border-radius: 30px; /* Zaoblené rohy */
    overflow: hidden; /* Skrytí přesahujících prvků */
    cursor: pointer; /* Ukazatel ruky při najetí */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Stín tlačítka */
    transition: box-shadow 0.3s ease-in-out, color 0.3s ease-in-out; /* Plynulý přechod */
}

/* Základní světelný efekt */
.button::before {
    content: ''; /* Prázdný obsah */
    position: absolute; /* Absolutní pozice v rámci tlačítka */
    top: 0; /* Umístění nahoře */
    left: -100%; /* Výchozí pozice mimo tlačítko */
    width: 200%; /* Šířka přesahující tlačítko */
    height: 100%; /* Výška shodná s tlačítkem */
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.6), transparent); /* Gradient pro světelný efekt */
    transition: transform 0.5s ease-in-out; /* Plynulý přechod při pohybu */
    z-index: 1; /* Vrstva nad tlačítkem */
}

/* Hover efekt pro světelný průlet */
.button:hover::before {
    transform: translateX(100%); /* Pohyb světla přes tlačítko */
}

/* Hover efekt tlačítka */
.button:hover {
    box-shadow: 0 8px 20px rgba(44, 83, 100, 0.8); /* Zvýraznění stínu při hover */
    color: #00d4ff; /* Změna barvy textu na světle modrou */
}

/* Aktivní stav tlačítka (kliknutí) */
.button:active {
    transform: scale(0.95); /* Mírné zmenšení tlačítka při kliknutí */
    box-shadow: 0 4px 10px rgba(44, 83, 100, 0.5); /* Zmenšení stínu */
}

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!