Musisz utworzyć przycisk z efektem po najechaniu za pomocą Elementor ?
Jeśli tak, usiądź w tym wspaniałym autobusie, bo to, co dziś osiągniemy, przedstawia poniższy film:
Stwórzmy stronę, a następnie zmodyfikujmy ją za pomocą Elementor, a następnie wybierz strukturę dwukolumnową. W panelu zmodyfikujmy nowo utworzoną sekcję, wybierając Minimalna wysokość na polu HAUTEUR i natychmiast Minimalna wysokość kliknijmy VH następnie ustaw kursor na 100.
W zakładce Styl zmieńmy kolor tła na # 070e39.
W pierwszej kolumnie upuśćmy widżet Przycisk, zmodyfikujmy jego tekst, wpisując Pokaż szczegóły i wyrównajmy to w prawo
W zakładce Styl zmodyfikujmy to typografia zmieniając rozmiar na 15, transformacja sur Wielkie litery et odstępy między literami sur 1.1
W zakładce zaawansowany, zmodyfikuj wszystko marginesy sur 20 oraz w dziale Niestandardowe CSS, wklejmy następujący kod, który dodaje gradient do przycisku:
selektor {
–Btn-szerokość: 180px;
–Btn-wysokość: 50px;
–Btn-tło: # 0e1538;
–Lewy gradient: # F803F8;
–Prawy gradient: # 03F2FD;
}
selektor a {
position: relative;
szerokość: var (–btn-szerokość);
wysokość: var (–btn-wysokość);
}
selektor a: przed,
selektor a: po {
szczęśliwy: ";
pozycja: absolutna;
wstawka: 0;
przejście: 0.5s;
}
selektor a: n-te dziecko (1): przed,
selektor a: n-te dziecko (1): po {
tło: gradient liniowy (45deg, var (–lewy gradient), var (–btn-background), var (–btn-background), var (–prawy-gradient));
}
selektor a: najedź: przed {
wstawka: -3px;
}
selektor a: najedź: po {
wstawka: -3px;
filtr: rozmycie (10px);
}
wybierz rozpiętość {
pozycja: absolutna;
góra: 0;
po lewej: 0;
szerokość: 100%;
wysokość: 100%;
tło: var (–btn-tło);
indeks z: 10;
wyświetlacz: flex;
uzasadnić-treść: centrum;
elementy wyrównujące: środek;
przepełnienie: ukryte;
}
Teraz, jeśli najedziesz na przycisk, odkryjesz wspaniałe efekty.
Aby dodać efekt lśniącego szkła na przycisku, wklejmy również następujący kod:
/ * Efekt lśniącego szkła * /
wybierz rozpiętość :: przed {
szczęśliwy: ";
pozycja: absolutna;
góra: 0;
lewy: -50%;
szerokość: 100%;
wysokość: 100%;
tło: rgba (255,255,255,0.075);
transformacja: pochylić (160deg);
}
Obserwujesz nowy efekt, który wnosi więcej światła do przycisku.
Czytaj także: Jak utworzyć sekcję członka zespołu za pomocą Elementora
Skopiujmy teraz ten przycisk i wklejmy go w drugiej kolumnie. Zmieńmy wyrównanie przycisku na lewo i zmieńmy tekst na Zobacz więcej.
Teraz po prostu musisz opublikować swoją pracę lub przejrzeć ją.
Oto 2 piękne przyciski stworzone.
Pobierz Elementor Pro teraz!
Wnioski
Więc ! To tyle w tym samouczku, który pokazuje, jak utworzyć przycisk z efektem najechania za pomocą Strona budowniczy Elementor. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
