Button rainbow edge

Výsledný vzhled tlačítka s duhovým okrajem

Klikněte zde

Vítejte!

ID tlačítka:

„rainbow-edge-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í, animovaným duhovýn obrysem -->
    <div id="rainbow-edge-button" class="button">
        <div class="button-front">
            Klikněte zde
        </div>
        <div class="button-back">
            Vítejte!
        </div>
    </div>
</div>

<script>
    // Přidání funkce pro otevření odkazu při kliknutí
    document.getElementById('rainbow-edge-button').addEventListener('click', function () {
        const url = "https://www.VÁŠ ODKAZ.cz"; // 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í */
    border-radius: 15px; /* Zaoblené rohy */
    border: 5px solid transparent; /* Animovaný obrys */
    background-image: linear-gradient(white, white), linear-gradient(45deg, #FF6F61, #FFD700, #00C9FF, #92FE9D); /* Dvojitý gradient pro obrys */
    background-origin: border-box; /* Gradient pouze na obrys */
    background-clip: content-box, border-box; /* Gradient obrysu oddělený od pozadí */
    animation: borderAnimation 2s linear infinite; /* Animace obrysu */
}

/* 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: #000000; /* Černá barva textu */
    border-radius: 10px; /* Zaoblené rohy */
    backface-visibility: hidden; /* Skrytí zadní strany, pokud není otočena */
    transition: background 0.6s ease-in-out, color 0.3s ease; /* Plynulá animace změny barev */
    background: #ADD8E6; /* Světle modré výchozí pozadí */
}

/* Zadní strana tlačítka */
.button-back {
    transform: rotateY(180deg); /* Otočení zadní strany o 180 stupňů */
}

/* Hover efekt: otáčení a změna barev */
.button:hover {
    transform: rotateY(180deg); /* Otočení celé karty */
}

.button:hover .button-front,
.button:hover .button-back {
    background: #DDA0DD; /* Světle fialové pozadí při hover */
    color: #222222; /* Mírně tmavší text při hover */
}

/* Animace obrysu */
@keyframes borderAnimation {
    0% {
        background-image: linear-gradient(white, white), linear-gradient(45deg, #FF6F61, #FFD700, #00C9FF, #92FE9D);
    }
    50% {
        background-image: linear-gradient(white, white), linear-gradient(45deg, #FFD700, #FF6F61, #92FE9D, #00C9FF);
    }
    100% {
        background-image: linear-gradient(white, white), linear-gradient(45deg, #FF6F61, #FFD700, #00C9FF, #92FE9D);
    }
}

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!