ID tlačítka:
„fancy-button„
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.
<div class="button-container">
<!-- Tlačítko s 3D efektem -->
<button id="fancy-button" class="button" data-url="https://www.VÁŠ ODKAZ.com">
Klikněte zde
</button>
</div>
<script>
document.getElementById('fancy-button').addEventListener('click', function () {
// Získání cílového odkazu z atributu data-url
const url = this.getAttribute('data-url');
if (url) {
window.open(url, '_blank'); // Otevření odkazu v novém okně
}
});
</script>
/* Kontejner tlačítka */
.button-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
position: relative;
}
/* Styl tlačítka */
.button {
display: flex; /* Aktivace Flexboxu */
justify-content: center; /* Horizontální zarovnání textu */
align-items: center; /* Vertikální zarovnání textu */
width: 200px;
height: 60px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #fff;
background: linear-gradient(45deg, #2196F3, #21CBF3); /* Základní pozadí */
border: none;
border-radius: 10px;
cursor: pointer;
transition: transform 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
box-shadow: 0 4px 15px rgba(33, 203, 243, 0.5);
}
/* Hover efekt tlačítka */
.button:hover {
transform: rotateY(360deg); /* 3D otáčení kolem Y osy */
color: #FFD700; /* Změna barvy textu na zlatou */
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6); /* Zvýraznění stínu */
}
/* Aktivní stav tlačítka */
.button:active {
transform: scale(0.95); /* Mírné zmenšení při kliknutí */
box-shadow: 0 4px 10px rgba(33, 203, 243, 0.3);
}
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!
© 2019 - 2025 Všechna práva vyhrazena | Bear Hugs s.r.o.
Powered and Hosted by Bear Hugs s.r.o.