Button rotate

Výsledný vzhled tlačítko s rotací

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

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

Vzhled zápisu CSS

				
					/* Kontejner tlačítka */
.button-container {
    display: flex; /* Flexbox pro zarovnání obsahu */
    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: 100vh; /* Výška kontejneru zabírá celé okno */
    margin: 0; /* Žádné okraje */
    overflow: hidden; /* Skrytí přetékajícího obsahu */
}

/* Základní styl tlačítka */
#rotate-button {
    position: relative; /* Relativní pozice pro efekty */
    width: 100px; /* Výchozí šířka tlačítka */
    height: 50px; /* Výchozí výška tlačítka */
    line-height: 50px; /* Vertikální zarovnání textu */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #A8C3A4;
    border: 2px solid #D9BBA9;
    border-radius: 25px;
    transition: all 1s ease;
    z-index: 1;
}

/* Efekt při najetí myší */
#rotate-button:hover {
    transform: rotate(360deg); /* Otočení o 360 stupňů */
    width: 120px; /* Zvýšení šířky tlačítka */
    height: 120px; /* Zvýšení výšky tlačítka */
    border-radius: 50%; /* Transformace na kruh */
    background: #D9BBA9;
    line-height: 120px; /* Zachování vycentrování textu */
    font-size: 18px; /* Zvýšení velikosti textu */
}

/* Světelný efekt na tlačítku */
#rotate-button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%; /* Velikost efektu */
    height: 200%;
    background: radial-gradient(circle, #F4C95D, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 1s ease;
    z-index: -1;
}

/* Aktivace světelného efektu při najetí */
#rotate-button:hover:before {
    opacity: 1; /* Zviditelnění efektu */
    transform: translate(-50%, -50%) scale(1);
}

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!