Button flipping

Výsledný vzhled tlačítko s otočením

Klikněte zde

Vítejte!

ID tlačítka:

„flipping-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 efektem otáčení karty -->
    <div id="flipping-button" class="button">
        <div class="button-front">
            Klikněte zde
              <!-- Přední strana tlačítka -->
        </div>
        <div class="button-back">
            Vítejte!
              <!-- Nápis při přejetí myší - druhá strana -->
        </div>
    </div>
</div>

<script>
    // Přidání funkce pro otevření odkazu při kliknutí
    document.getElementById('flipping-button').addEventListener('click', function () {
        const url = "https://bearhugs.space/"; // Vložte svou 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 */
    perspective: 1000px; /* Perspektiva pro 3D efekt */
}

/* Styl tlačítka */
.button {
    position: relative; /* Relativní pozice pro vrstvy */
    width: 200px; /* Šířka tlačítka */
    height: 60px; /* Výška tlačítka */
    transform-style: preserve-3d; /* Zachování 3D efektu */
    transition: transform 0.6s; /* Plynulé otáčení */
    cursor: pointer; /* Ukazatel ruky při najetí */
}

/* Přední a zadní strana tlačítka */
.button-front,
.button-back {
    position: absolute; /* Absolutní pozice v rámci tlačítka */
    width: 100%; /* Šířka 100 % tlačítka */
    height: 100%; /* Výška 100 % tlačítka */
    display: flex; /* Flexbox pro zarovnání textu */
    justify-content: center; /* Horizontální zarovnání textu */
    align-items: center; /* Vertikální zarovnání textu */
    font-size: 18px; /* Velikost textu */
    font-weight: bold; /* Zvýraznění textu */
    color: #fff; /* Barva textu */
    border-radius: 10px; /* Zaoblené rohy */
    backface-visibility: hidden; /* Skrytí zadní strany, pokud není otočena */
}

/* Přední strana tlačítka */
.button-front {
    background: linear-gradient(45deg, #2196F3, #21CBF3); /* Modrý gradient */
}

/* Zadní strana tlačítka */
.button-back {
    background: linear-gradient(45deg, #FF6F61, #FFD700); /* Červený gradient */
    transform: rotateY(180deg); /* Otočení zadní strany o 180 stupňů */
}

/* Hover efekt pro otočení tlačítka */
.button:hover {
    transform: rotateY(180deg); /* Otočení celé karty */
}

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!