Button moveup

Výsledný vzhled tlačítko s posunutím

ID tlačítka:

„moveup-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

				
					<div class="button-container">
    <!-- Tlačítko s ID moveup-button a odkazem -->
    <a href="https://VÁŠ ODKAZ.cz/" id="moveup-button" class="button" target="_blank" rel="noopener noreferrer">
        Objevte
    </a>
</div>

Vzhled zápisu CSS

				
					/* Kontejner tlačítka */
.button-container {
    display: flex; /* Flexbox pro snadné zarovnání */
    justify-content: center; /* Horizontální zarovnání */
    align-items: center; /* Vertikální zarovnání */
    position: relative; /* Relativní pozice kontejneru */
    width: 200px;
    height: 100px;
    margin: 20px auto; /* Centrované umístění na stránce */
}

/* Tlačítko */
.button {
    position: relative;
    width: 150px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 50px;
    color: #fff;
    background: linear-gradient(45deg, #FF5722, #FFC107);
    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;
}

.button:hover {
    background: linear-gradient(45deg, #FFC107, #FF5722);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.6);
}

/* Particles kontejner */
#particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Zabraňuje interakci */
    overflow: hidden;
    z-index: 0; /* Zajištění, že částice jsou za tlačítkem */
}

/* Styl částic */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none; /* Částice nemohou být kliknuty */
}

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!