Potrebno je izraditi gumb s učinkom pri lebdenju s Elementor ?
Ako jeste, sjednite u ovaj veličanstveni autobus, jer ono što ćemo danas postići je u sljedećem videu:
Stvorimo stranicu, a zatim je modificiramo pomoću Elementor, zatim odaberite strukturu od 2 stupca. Na ploči modificirajmo novostvoreni odjeljak odabirom Minimalna visina na polju Visina i to odmah Minimalna visina kliknimo na VH zatim postavite kursor na 100.
U kartici Stil promijenimo boju pozadine u # 070e39.
U prvom stupcu ispustimo widget Button, izmijenimo njegov tekst upisivanjem Pregledavati pojedinosti i poravnajmo ga udesno
U kartici Stil modificirajmo ga tipografija promjenom veličine na 15, transformacija sur velikim slovima et razmak između slova sur 1.1
U kartici napredan, izmijenite sve margine sur 20 i u odjeljku Prilagođena CSS, zalijepimo sljedeći kod koji gumbu dodaje gradijent:
selektor {
–Btn-širina: 180px;
–Btn-visina: 50px;
–Btn-pozadina: # 0e1538;
– Lijevi gradijent: # F803F8;
– Desni gradijent: # 03F2FD;
}
selektor a {
Položaj: relativna;
širina: var (–btn-width);
visina: var (–btn-visina);
}
selektor a: prije,
selektor a: nakon {
sretan: ";
položaj: apsolutni;
umetak: 0;
prijelaz: 0.5s;
}
selektor a: n-to dijete (1): prije,
selektor a: n-to dijete (1): nakon {
pozadina: linearni gradijent (45 stupnjeva, var (–lijevi gradijent), var (–btn-pozadina), var (–btn-pozadina), var (–desni gradijent));
}
selektor a: lebdjeti: prije {
umetnuti: -3px;
}
selektor a: lebdjeti: nakon {
umetnuti: -3px;
filter: zamućenje (10px);
}
birač raspona {
položaj: apsolutni;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 100%;
pozadina: var (–btn-pozadina);
z-indeks: 10;
zaslon: flex;
justify-content: centar;
poravnati predmeti: središte;
preljev: skriven;
}
Sada ako zadržite pokazivač iznad gumba, otkrit ćete veličanstvene efekte.
Za dodavanje efekta sjajnog stakla na gumb zalijepimo i sljedeći kod:
/ * Efekt sjajnog stakla * /
selektor a span :: prije {
sretan: ";
položaj: apsolutni;
vrh: 0;
lijevo: -50%;
širina: 100%;
visina: 100%;
pozadina: rgba (255,255,255,0.075);
transformacija: koso (160 stupnjeva);
}
Primjećujete novi efekt koji gumbu daje više svjetla.
Pročitajte također: Kako stvoriti odjeljak za članove tima s Elementorom
Sada kopirajmo ovaj gumb i zalijepimo ga u drugi stupac. Promijenimo poravnanje gumba ulijevo i promijenimo tekst u Pogledajte više.
Sad samo moraš objaviti svoj rad ili ga pregledajte.
Ovdje su stvorena 2 prekrasna gumba.
Nabavite Elementor Pro odmah!
Zaključak
Dakle! To je sve za ovaj vodič koji vam pokazuje kako stvoriti gumb s efektom lebdenja pomoću stranica graditelj Elementor. Ako imate bilo kakvih nedoumica o tome kako doći tamo, javite nam unutar Komentari.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...