Button split

Výsledný vzhled tlačítko s rozdělením

Klikněte

zde

dále...

ID tlačítka:

„split-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 složené ze dvou částí -->
    <div id="split-button" class="button">
        <div class="left-part">Klikněte</div>
        <div class="right-part">zde</div>
        <span class="hover-text">dále...</span>
    </div>
</div>

<script>
    // Přidání funkce pro otevření odkazu při kliknutí
    document.getElementById('split-button').addEventListener('click', function () {
        const url = "https://VAŠEDOMÉNA.com"; // URL odkaz
        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 */
}

/* Styl tlačítka */
.button {
    position: relative; /* Relativní pozice */
    display: flex; /* Flexbox pro dvě části tlačítka */
    justify-content: space-around; /* Menší mezera mezi částmi */
    align-items: center; /* Vertikální zarovnání */
    width: 250px; /* Šířka tlačítka */
    height: 60px; /* Výška tlačítka */
    background-color: #2F2F2F; /* Antracitové pozadí */
    border: 2px solid #000; /* Černý okraj */
    cursor: pointer; /* Standardní šipka */
    overflow: hidden; /* Skrytí přesahujících prvků */
    text-transform: uppercase; /* Velká písmena */
    transition: background-color 0.5s ease, border-color 0.5s ease; /* Plynulý přechod barvy pozadí a okraje */
}

/* Levá a pravá část tlačítka */
.left-part {
    display: flex; /* Flexbox pro zarovnání textu */
    justify-content: center; /* Horizontální zarovnání textu */
    align-items: center; /* Vertikální zarovnání textu */
    width: 48%; /* Šířka části */
    height: 100%; /* Výška celé tlačítka */
    font-size: 18px; /* Velikost textu */
    font-weight: bold; /* Zvýraznění textu */
    background-color: #2F2F2F; /* Antracitové pozadí */
    color: #FFD700; /* Zlatá barva textu */
    transition: all 0.5s ease; /* Plynulý hover efekt */
    transform: translateX(10px); /* Posun doprava */
}

.right-part {
    display: flex; /* Flexbox pro zarovnání textu */
    justify-content: center; /* Horizontální zarovnání textu */
    align-items: center; /* Vertikální zarovnání textu */
    width: 48%; /* Šířka části */
    height: 100%; /* Výška celé tlačítka */
    font-size: 18px; /* Velikost textu */
    font-weight: bold; /* Zvýraznění textu */
    background-color: #2F2F2F; /* Antracitové pozadí */
    color: #FFD700; /* Zlatá barva textu */
    transition: all 0.5s ease; /* Plynulý hover efekt */
    transform: translateX(-10px); /* Posun doleva */
}

/* Hover efekt pro rozestoupení částí */
.button:hover .left-part {
    transform: translateX(-100%); /* Posun doleva */
    opacity: 0; /* Zmizí */
}

.button:hover .right-part {
    transform: translateX(100%); /* Posun doprava */
    opacity: 0; /* Zmizí */
}

/* Pozadí a okraj tlačítka při hover efektu */
.button:hover {
    background-color: transparent; /* Průhledné pozadí */
    border-color: transparent; /* Průhledný okraj */
}

/* Text "dále..." */
.hover-text {
    position: absolute;
    top: 50%; /* Umístění do středu tlačítka */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px; /* Velikost textu */
    font-weight: bold; /* Zvýraznění textu */
    color: #000; /* Černá barva textu */
    opacity: 0; /* Text je neviditelný */
    transition: opacity 0.5s ease; /* Plynulý přechod viditelnosti */
}

/* Hover efekt pro zobrazení textu "dále..." */
.button:hover .hover-text {
    opacity: 1; /* Zviditelnění textu */
}

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!