Hallo Elementors,
heute möchte ich Ihnen einen einfachen Trick zeigen, wie Sie einen "Slide Button" bei Hover mit Elementor Profi und The Plus Addons. Mit ein paar Anpassungen der benutzerdefinierten css und in den Stilen können Sie Ihre individuellen Call to Actions Slide Buttons on Hover erstellen.
5 Schritte zur Erstellung von "Slide Buttons" mit The Plus Addons und Custom CSS
1. Aktivieren Sie "The Plus Addons" & "Taste" Widget
2. Hinzufügen von "TPButton" Widget
Ziehen Sie das "TPButton"-Widget per Drag & Drop in den Hauptbereich.
3. Wählen Sie "Stil 2" und fügen Sie die CSS-Klasse
Wählen Sie Stil 2 auf der Registerkarte Inhalt und fügen Sie dem Widget eine CSS-Klasse hinzu: mybutton
4. Benutzerdefiniertes CSS hinzufügen
Fügen Sie den folgenden Code zu Ihrem benutzerdefinierten CSS auf der Registerkarte "Erweitert" hinzu:
.mybutton i{
padding:0px !important;
Breite:50px !wichtig;
Höhe:50px !wichtig;
Farbe: weiß !wichtig;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
transform: rotate(15deg);
}
5. Ihr endgültiges Styling
Das ist wichtig: Setzen Sie die Textfarbe auf transparent im Zustand NORMAL (1)
Die restlichen Einstellungen finden Sie in den Bildern und durch Ausprobieren 😉 oder laden Sie einfach die .json-Datei unten herunter.
Schlusswort & .JSON-Datei Download
So einfach können Sie einen Slide Button bei Hover mit der Pro Version von Elementor und The Plus Addons für Elementor. Ein kleiner Trick mit großer Wirkung, den Ihre Kunden mit Elementor lieben werden. Weitere coole Widgets für Elementor finden Sie in der Vollständige Widget-Tabelle. Habt Spaß und hinterlasst bitte einen Kommentar!
