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.

stvorite gumb s efektom lebdenja pomoću Elementora

U kartici Stil promijenimo boju pozadine u # 070e39.

U prvom stupcu ispustimo widget Button, izmijenimo njegov tekst upisivanjem Pregledavati pojedinosti i poravnajmo ga udesno

stvorite gumb s efektom lebdenja pomoću Elementora

U kartici Stil modificirajmo ga tipografija promjenom veličine na 15, transformacija sur velikim slovima et razmak između slova sur 1.1

stvorite gumb s efektom lebdenja pomoću Elementora

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;

}

stvorite gumb s efektom lebdenja pomoću Elementora

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);

}

stvorite gumb s efektom lebdenja pomoću Elementora

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.

...