Je potrebné vytvoriť tlačidlo s efektom pri umiestnení kurzora myši Elementor ?
Ak áno, sadnite si do tohto veľkolepého autobusu, pretože to, čo dnes dosiahneme, je v nasledujúcom videu:
Vytvorme stránku a potom ju upravíme pomocou Elementora potom vyberte 2-stĺpcovú štruktúru. V paneli upravme novovytvorenú sekciu výberom Min. výška na ihrisku Výška a hneď Min. výška kliknime ďalej VH potom nastavte kurzor na 100.
Na karte Štýl zmeňme farbu pozadia na # 070e39.
V prvom stĺpci vypustíme miniaplikáciu Button, upravíme jej text zadaním Zobraziť podrobnosti a zarovnajme to doprava
Na karte Štýl poďme to upraviť typografie zmenou veľkosti na 15, premena sur Veľké písmená et medzery medzi písmenami sur 1.1
Na karte pokročilý, upraviť všetky okraje sur 20 a v sekcii Vlastné CSS, prilepme nasledujúci kód, ktorý k tlačidlu pridá prechod:
selektor {
–Btn-width: 180px;
–Btn-height: 50px;
–Btn-background: # 0e1538;
– Ľavý gradient: # F803F8;
–Pravý gradient: # 03F2FD;
}
selektor a {
Pozícia: relatívna;
šírka: var (–btn-width);
výška: var (–btn-height);
}
volič a: predtým,
selektor a: po {
šťasný: ";
pozícia: absolútna;
vložka: 0;
prechod: 0.5s;
}
volič a: n-té dieťa (1): predtým,
selektor a: n-té dieťa (1): po {
pozadie: lineárny gradient (45 stupňov, var (–prechod vľavo), var (–btn-pozadie), var (–btn-pozadie), var (–pravý gradient));
}
selektor a: podržte kurzor myši: pred {
vložka: -3px;
}
selektor a: podržte kurzor myši: po {
vložka: -3px;
filter: rozostrenie (10px);
}
selektor a span {
pozícia: absolútna;
hore: 0;
vľavo: 0;
šírka: 100%;
výška: 100%;
pozadie: var (–btn-background);
z-index: 10;
displej: flex;
zdôvodniť-obsah: stred;
Zarovnať položky: stred;
pretečenie: skryté;
}
Teraz, keď umiestnite kurzor myši na tlačidlo, objavíte nádherné efekty.
Ak chcete na tlačidlo pridať efekt lesklého skla, prilepte aj nasledujúci kód:
/ * Efekt lesklého skla * /
select a span :: pred {
šťasný: ";
pozícia: absolútna;
hore: 0;
vľavo: -50 %;
šírka: 100%;
výška: 100%;
pozadie: rgba (255,255,255,0.075);
transformácia: skosenie (160 stupňov);
}
Pozorujete nový efekt, ktorý prináša viac svetla do tlačidla.
Čítajte tiež: Ako vytvoriť sekciu členov tímu pomocou Elementor
Teraz skopírujeme toto tlačidlo a prilepíme ho do druhého stĺpca. Zmeňme zarovnanie tlačidla doľava a zmeňme text na Viac informácií.
Teraz už len musíte publikovať svoju prácu alebo jej ukážku.
Tu sú vytvorené 2 krásne gombíky.
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento tutoriál, ktorý vám ukáže, ako vytvoriť tlačidlo s efektom vznášania pomocou stránka staviteľ Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
