Necessità di creare un pulsante con effetto al passaggio del mouse con Elementor ?

Se è così, prendi posto in questo magnifico autobus, perché quello che otterremo oggi è nel seguente video:

Creiamo una pagina e poi la modifichiamo con Elementor, quindi seleziona una struttura a 2 colonne. Nel pannello modifichiamo la sezione appena creata selezionando Altezza minima sul campo Hauteur e immediatamente Altezza minima clicchiamo su VH quindi impostare il cursore su 100.

crea un pulsante con effetto al passaggio del mouse con Elementor

Nella scheda Style cambiamo il colore di sfondo in # 070e39.

Nella prima colonna, rilasciamo un widget Button, modifichiamo il suo testo digitando Visualizza dettagli e allineiamolo a destra

crea un pulsante con effetto al passaggio del mouse con Elementor

Nella scheda Style modifichiamolo tipografia cambiando la taglia 15, trasformazione su maiuscolo et spaziatura del carattere su 1.1

crea un pulsante con effetto al passaggio del mouse con Elementor

Nella scheda avanzato, modifica tutto marges su 20 e nella sezione CSS personalizzato, incolliamo il codice seguente che aggiunge una sfumatura al pulsante:        

selettore {

    –Btn-larghezza: 180px;

    –Altezza Btn: 50px;

    –Btn-sfondo: # 0e1538;

    –Gradiente sinistro: # F803F8;

    –Gradiente destro: # 03F2FD;

}

selettore a {

  position: relative;

  larghezza: var (–btn-larghezza);

  altezza: var (–btn-altezza);

}

selettore a: prima,

selettore a: dopo {

  contento: ";

  posizione: assoluta;

  riquadro: 0;

  transizione: 0.5 s;

}

selettore a: nth-child (1): prima,

selettore a: nth-child (1): dopo {

  sfondo: gradiente lineare (45deg, var (–gradiente di sinistra), var (–btn-sfondo), var (–btn-sfondo), var (–gradiente di destra));

}

selettore a: passa il mouse: prima di {

  riquadro: -3px;

}

selettore a: passa il mouse: dopo {

  riquadro: -3px;

  filtro: sfocatura (10px);

}

seleziona un intervallo {

  posizione: assoluta;

  in alto: 0;

  sinistra: 0;

  Larghezza: 100%;

  altezza: 100%;

  sfondo: var (–btn-sfondo);

  indice z: 10;

  Display: flettere;

  giustificare-contenuto: centro;

  align-items: center;

  overflow: hidden;

}

crea un pulsante con effetto al passaggio del mouse con Elementor

Ora se passi il mouse sopra il pulsante scoprirai effetti magnifici.

Per aggiungere un effetto vetro lucido sul pulsante incolliamo anche il seguente codice:

/ * Effetto Vetro Lucido * /

selector un intervallo :: prima di {

  contento: ";

  posizione: assoluta;

  in alto: 0;

  sinistra: -50%;

  Larghezza: 100%;

  altezza: 100%;

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

  trasformare: inclinare (160 gradi);

}

crea un pulsante con effetto al passaggio del mouse con Elementor

Si osserva un nuovo effetto che porta più luce al pulsante.

Leggi anche: Come creare una sezione per i membri del team con Elementor

Ora copiamo questo pulsante e incolliamolo nella seconda colonna. Cambiamo l'allineamento del pulsante a sinistra e cambiamo il testo in più.

Ora devi solo Pubblicare il tuo lavoro o visualizzarlo in anteprima.

Ecco 2 bellissimi pulsanti creati.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo tutorial che ti mostra come creare un pulsante con effetto hover con il Pagina costruttore Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...