Hoi Elementors,
Vandaag wil ik jullie een eenvoudige truc laten zien hoe je een "Slide Button" kunt maken op Hover met Elementor Pro en The Plus Addons. Met een paar aanpassingen van aangepaste css en in de stijlen kunt u uw individuele Call to Actions Slide Buttons on Hover.
5 Stappen hoe "Slide Buttons" te maken met The Plus Addons en aangepaste CSS
1. Activeer "The Plus Addons" & "Button" Widget
2. Toevoegen "TPButton" Widget
Sleep de "TPButton" widget naar de hoofdsectie.
3. Kies "Style 2" en voeg CSS Klasse toe
Selecteer Stijl 2 in het Inhoud Tabblad en voeg een CSS klasse toe aan de widget: mijnknop
4. Aangepaste CSS toevoegen
Voeg de volgende code toe aan uw aangepaste CSS in het tabblad geavanceerd:
.mybutton i{
padding:0px !belangrijk;
width:50px !important;
hoogte:50px !belangrijk;
kleur: wit !belangrijk;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
transformeren: roteren(15deg);
}
5. Uw definitieve styling
Belangrijk: Stel de tekstkleur in op transparant in NORMALE toestand (1)
De overige instellingen kun je vinden in de afbeeldingen en door trial and error 😉 Of download gewoon het .json-bestand hieronder.
Laatste woorden en .JSON-bestand Downloaden
Zo gemakkelijk kunt u een schuifknop op hover maken met de Pro Versie van Elementor en The Plus Addons voor Elementor. Een kleine truc met groot effect, die uw klanten met plezier zullen gebruiken Elementor. Je kunt meer coole widgets voor Elementor vinden in de Volledige Widget Tabel. Veel plezier en laat een reactie achter!
