ZWARTE WEEK
20% - 70% UIT

SALE

Elementor  Crocoblock  The Plus  Premium Addons  ElementsKit  Ultimate Addons  Element Pack  Essential Addons  Unlimited Elements  PowerPack  HT Mega 

Schuifknop op zweefstand

Elementor Schuifknop bij zweven

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

Om dit coole effect te creëren heb je de plugins nodig Elementor en The Plus Addons. Bezoek Demo Pagina van >>> Plus Knoppen <<<.

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!

Uw opmerkingen

Verken verder Widgets & Extensions

Categorieën

BLACK WEEK EINDIGT IN ...

Dagen
Uren
Notulen
Seconden