Je třeba vytvořit tlačítko s efektem při najetí myší Elementor ?
Pokud ano, posaďte se do tohoto velkolepého autobusu, protože to, čeho dnes dosáhneme, je v následujícím videu:
Vytvoříme stránku a poté ji upravíme pomocí Elementora poté vyberte 2sloupcovou strukturu. V panelu upravme nově vytvořenou sekci výběrem Min. výška na poli výška a okamžitě Min. výška klikneme na VH poté nastavte kurzor na 100.
Na kartě Styl změňme barvu pozadí na # 070e39.
V prvním sloupci vypustíme widget Button, upravíme jeho text psaním Zobrazit podrobnosti a zarovnáme to doprava
Na kartě Styl pojďme to upravit typografie změnou velikosti 15, proměna z Velká písmena et mezery mezi písmeny z 1.1
Na kartě pokročilý, upravit vše okraje z 20 a v sekci Vlastní CSS, vložíme následující kód, který k tlačítku přidá přechod:
selektor {
–Btn-width: 180px;
–Btn-height: 50px;
–Btn-pozadí: # 0e1538;
–Levý gradient: # F803F8;
–Pravý gradient: # 03F2FD;
}
volič a {
Pozice: relativní;
šířka: var (–btn-width);
výška: var (–btn-height);
}
volič a: předtím,
volič a: po {
šťastný: ";
pozice: absolutní;
vložka: 0;
přechod: 0.5s;
}
volič a: n-té dítě (1): předtím,
selektor a: n-té dítě (1): po {
pozadí: linear-gradient (45deg, var (–left-gradient), var (–btn-background), var (–btn-background), var (–right-gradient));
}
selektor a: hover: před {
vložka: -3px;
}
selektor a: hover: po {
vložka: -3px;
filtr: rozostření (10px);
}
selector a span {
pozice: absolutní;
horní: 0;
vlevo: 0;
šířka: 100%;
výška: 100%;
pozadí: var (–btn-background);
z-index: 10;
displej: flex;
justify-content: center;
Zarovnat položky: střed;
přetečení: skryté;
}
Nyní, když najedete na tlačítko, objevíte nádherné efekty.
Chcete-li na tlačítko přidat efekt lesklého skla, vložte také následující kód:
/ * Efekt lesklého skla * /
selector a span :: before {
šťastný: ";
pozice: absolutní;
horní: 0;
vlevo: -50 %;
šířka: 100%;
výška: 100%;
pozadí: rgba (255,255,255,0.075);
transformace: zkosení (160 stupňů);
}
Pozorujete nový efekt, který přináší více světla do tlačítka.
Čtěte také: Jak vytvořit sekci členů týmu pomocí Elementor
Nyní toto tlačítko zkopírujeme a vložíme do druhého sloupce. Změňme zarovnání tlačítka doleva a změňme text na Zobrazit více.
Teď prostě musíte publikovat svou práci nebo její náhled.
Zde jsou vytvořena 2 krásná tlačítka.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Tak ! To je vše pro tento tutoriál, který vám ukáže, jak vytvořit tlačítko s efektem hoveru pomocí stránka stavitel Elementor. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
