Ciao Elementors,
Oggi vorrei mostrarvi un semplice trucco per creare un "pulsante di scorrimento" su Hover con Elementor Pro e The Plus Addons. Con alcuni aggiustamenti di css personalizzati e negli stili potete creare il vostro Call to Actions Slide Buttons on Hover individuale.
5 passi per creare "pulsanti a scorrimento" con The Plus Addons e CSS personalizzato
1. Attivare "The Plus Addons" & "Button" Widget
2. Aggiungere "TPButton" Widget
Trascinate il widget "TPButton" nella sezione principale.
3. Scegliere "Stile 2" e aggiungere la classe CSS
Seleziona Stile 2 nella scheda Contenuto e aggiungere una classe CSS al widget: mybutton
4. Aggiungere il CSS personalizzato
Aggiungi il seguente codice al tuo CSS personalizzato nella scheda avanzata:
.mybutton i{
padding:0px !important;
larghezza:50px !important;
altezza:50px !important;
colore: bianco !importante;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
trasformare: ruotare(15deg);
}
5. Il tuo stile finale
Importante: Imposta il colore del testo su trasparente nello stato NORMALE (1)
Le restanti impostazioni possono essere trovate nelle immagini e per tentativi 😉 o semplicemente scaricare il file .json qui sotto.
Parole finali & .JSON-File Download
Così facilmente si può creare un pulsante di scorrimento su hover con la versione Pro di Elementor e The Plus Addons per Elementor. Un piccolo trucco con grande effetto, che i vostri clienti ameranno usando Elementor. Puoi trovare altri fantastici widget per Elementor nella sezione Tabella completa Widget. DIVERTITITI e per favore lascia un commento!
