Salut Elementors,
Aujourd'hui, j'aimerais vous montrer une astuce simple pour créer un "Slide Button" au survol avec Elementor Pro et The Plus Addons. Avec quelques ajustements de css personnalisé et dans les styles, vous pouvez créer votre propre appel à des actions Slide Buttons on Hover.
5 étapes pour créer des "Slide Buttons" avec The Plus Addons et des CSS personnalisés
1. Activez "The Plus Addons" & "Bouton" Widget
2. Ajouter "TPButton" Widget
Faites glisser et déposez le widget "TPButton" dans la section principale.
3. Choisissez "Style 2" et ajoutez la classe CSS
Sélectionnez Style 2 dans l'onglet Contenu et ajoutez une classe CSS au widget : monbouton
4. Ajouter un CSS personnalisé
Ajoutez le code suivant à votre CSS personnalisé dans l'onglet avancé :
.mybutton i{
padding:0px !important ;
width:50px !important ;
height:50px !important ;
color : white !important ;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
transform : rotate(15deg) ;
}
5. Votre coiffure finale
Important : Définir la couleur du texte comme transparente dans l'état NORMAL (1)
Les autres paramètres peuvent être trouvés dans les images et par essai et erreur 😉 ou simplement télécharger le fichier .json ci-dessous.
Final Words & .JSON-File Télécharger
Vous pouvez créer si facilement un bouton coulissant au survol avec la version Pro de Elementor et The Plus Addons pour Elementor. Un petit truc avec un grand effet, que vos clients vont adorer en utilisant Elementor. Vous pouvez trouver d'autres widgets sympas pour Elementor dans la section "widgets". Tableau complet Widget. AMUSEZ-VOUS et laissez un commentaire !
