Trenger å lage knapp med effekt på hover med Elementor ?

I så fall, ta plass i denne praktfulle bussen, for det vi vil oppnå i dag er i følgende video:

La oss lage en side og deretter endre den med Elementor, velg deretter en 2-kolonne struktur. La oss i panelet endre den nyopprettede delen ved å velge Min Høyde på banen Høyde og umiddelbart Min Høyde la oss klikke videre VH sett deretter markøren til 100.

lag en knapp med sveveeffekt med Elementor

I fanen Stil la oss endre bakgrunnsfargen til # 070e39.

I den første kolonnen, la oss slippe en Button-widget, endre teksten ved å skrive Vis detaljer og la oss justere den til høyre

lag en knapp med sveveeffekt med Elementor

I fanen Stil la oss endre det typografi ved å endre størrelsen på 15, transformasjon store bokstaver et avstand mellom bokstavene1.1

lag en knapp med sveveeffekt med Elementor

I fanen avansert, endre alle marginer 20 og i seksjonen Custom CSS, la oss lime inn følgende kode som legger til en gradient til knappen:        

velger {

    –Btn-bredde: 180px;

    –Btn-høyde: 50px;

    –Btn-bakgrunn: # 0e1538;

    – Venstre gradient: # F803F8;

    – Høyre gradient: # 03F2FD;

}

velger en {

  stilling: relative;

  width: var (–btn-width);

  høyde: var (–btn-høyde);

}

velger a: før,

velger a: etter {

  lykkelig: ";

  posisjon: absolutt;

  innfelt: 0;

  overgang: 0.5s;

}

selector a: nth-child (1): før,

selector a: nth-child (1): etter {

  bakgrunn: lineær gradient (45 grader, var (–venstre-gradient), var (–btn-bakgrunn), var (–btn-bakgrunn), var (–høyre-gradient));

}

selector a: hover: before {

  innfelt: -3px;

}

selector a: hover: after {

  innfelt: -3px;

  filter: uskarphet (10px);

}

selector a span {

  posisjon: absolutt;

  topp: 0;

  venstre: 0;

  bredde: 100%;

  høyde: 100%;

  bakgrunn: var (–btn-bakgrunn);

  z-indeks: 10;

  display: flex;

  rettferdiggjøre-innhold: senter;

  align-items: sentrum;

  overløp: skjult;

}

lag en knapp med sveveeffekt med Elementor

Nå hvis du holder musepekeren over knappen vil du oppdage fantastiske effekter.

For å legge til en skinnende glasseffekt på knappen, la oss også lime inn følgende kode:

/ * Skinnende glasseffekt * /

selector a span :: før {

  lykkelig: ";

  posisjon: absolutt;

  topp: 0;

  venstre: -50%;

  bredde: 100%;

  høyde: 100%;

  bakgrunn: rgba (255,255,255,0.075);

  transform: skjevt (160 grader);

}

lag en knapp med sveveeffekt med Elementor

Du ser en ny effekt som gir mer lys til knappen.

Les også: Hvordan opprette en gruppemedlemsseksjon med Elementor

La oss nå kopiere denne knappen og lime den inn i den andre kolonnen. La oss endre knappejusteringen til venstre og endre teksten til Se mer.

Nå må du bare publisere arbeidet ditt eller forhåndsvise det.

Her er 2 flotte knapper laget.

Få Elementor Pro nå!

konklusjonen

Så! Det er det for denne opplæringen som viser deg hvordan du lager en knapp med hover-effekt med sidebygger Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...