Skal oprette en knap med effekt på hover med Elementor ?
Hvis ja, så tag plads i denne storslåede bus, for det, vi vil opnå i dag, er i følgende video:
Lad os oprette en side og derefter ændre den med Elementor, og vælg derefter en struktur med 2 kolonner. Lad os i panelet ændre den nyoprettede sektion ved at vælge Min Højde på marken Højde og straks Min Højde lad os klikke videre VH sæt derefter markøren til 100.
I fanen stil lad os ændre baggrundsfarven til # 070e39.
Lad os slippe en knap-widget i den første kolonne, ændre dens tekst ved at skrive Se detaljer og lad os justere det til højre
I fanen stil lad os ændre det typografi ved at ændre størrelsen på 15, transformation ud af store bogstaver et bogstavmellemrum ud af 1.1
I fanen avanceret, rediger alle marginer ud af 20 og i afsnittet Brugerdefineret CSS, lad os indsætte følgende kode, der tilføjer en gradient til knappen:
vælger {
–Btn-bredde: 180px;
–Btn-højde: 50px;
–Btn-baggrund: # 0e1538;
– Venstre-gradient: # F803F8;
– Højre gradient: # 03F2FD;
}
vælger en {
position: relative;
width: var (–btn-width);
højde: var (–btn-højde);
}
vælger a: før,
vælger a: efter {
glad: ";
position: absolut;
indsat: 0;
overgang: 0.5s;
}
vælger a: n. underordnede (1): før,
selector a: nth-child (1): efter {
baggrund: lineær gradient (45deg, var (–venstre-gradient), var (–btn-baggrund), var (–btn-baggrund), var (–højre-gradient));
}
selector a: hover: before {
indsat: -3px;
}
selector a: hover: after {
indsat: -3px;
filter: sløring (10px);
}
selector a span {
position: absolut;
øverst: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
baggrund: var (–btn-baggrund);
z-indeks: 10;
display: flex;
retfærdiggøre-indhold: center;
align-items: center;
overløb: skjult;
}
Hvis du nu holder markøren over knappen, vil du opdage storslåede effekter.
For at tilføje en skinnende glaseffekt på knappen lad os også indsætte følgende kode:
/ * Skinnende glaseffekt * /
selector a span :: før {
glad: ";
position: absolut;
øverst: 0;
venstre: -50%;
bredde: 100%;
højde: 100%;
baggrund: rgba (255,255,255,0.075);
transformere: skævt (160 grader);
}
Du observerer en ny effekt, som bringer mere lys til knappen.
Læs også: Sådan opretter du en teammedlemssektion med Elementor
Lad os nu kopiere denne knap og indsætte den i den anden kolonne. Lad os ændre knapjusteringen til venstre og ændre teksten til Se mere.
Nu skal du bare udgive dit arbejde eller forhåndsvise det.
Her er 2 flotte knapper lavet.
Hent Elementor Pro nu!
Konklusion
Så! Det var det for denne tutorial, der viser dig, hvordan du opretter en knap med svæveeffekt med side builder Elementor. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
