Elementor Animiertes Tasten-Widget mit Creative Hover Effekten
Creative Button ist ein kostenloses Master Addons Widget für Call-to-Action Buttons mit integrierter Hover-Animation Wählen Sie einen Effekt aus der Button Effects Liste, geben Sie den Text und eine optionale zweite Nachricht für den Hover ein, fügen Sie ein Symbol hinzu, und stylen Sie die normalen und Hover-Farben Das kostenlose Plugin beinhaltet 6 Effekte: Standard, Winona, Ujarak, Wayra, Tamaya und Rayen. Master Addons Pro Fügt 15 weitere hinzu, von Pipaluk bis Shikoba, also insgesamt 21.
So fügen Sie eine animierte Schaltfläche in Elementor hinzu
Sie benötigen Elementor und das kostenlose Master Addons Plugin von WordPress.org.
- Überprüfen Sie, ob die Kreativtaste eingeschaltet ist Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Kreativer Knopf Und auf die Seite ziehen.
- Wählen Sie einen Effekt aus Tasteneffekte und halten Sie die Maus auf die Schaltfläche, um eine Vorschau anzuzeigen.
- Geben Sie den Schaltflächentext, den alternativen Schaltflächentext und die Link-URL ein.
- Fügen Sie ein Symbol hinzu und wählen Sie Vorher oder Nachher.
- Stellen Sie auf der Registerkarte Stil Polsterung, Randradius und verschiedene Normal - und Hover-Farben ein, damit die Animation leicht zu erkennen ist.
Für einen längeren Walkthrough mit Erweiterungen wie Tooltips und Enthüllungsanimationen lesen Sie So erstellen Sie animierte Elementor-Tasten. Jede Einstellung ist in der Einstellungen für das Widget der kreativen Schaltfläche.
21 Hover-Effekte: 6 kostenlos, 15 mit Pro
Jeder Name in Tasteneffekte Ist eine andere CSS-Hover-Animation, wie z.B. ein Hintergrund, der hineinrutscht, ein Rand, der um den Knopf zieht oder Text, der zu einer zweiten Nachricht tauscht Standard, Winona, Ujarak, Wayra, Tamaya und Rayen sind frei Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite und Shikoba brauchen Pro. Bewegen Sie den Knopf auf der Leinwand, um sich jeden einzelnen vorzusehen.
- Tastenausrichtung und Tastentextausrichtung, pro Gerät einstellen.
- Zusätzliche Vorher-Nachher-Hintergrundfarben für Effekte, die geschichtete Hintergründe verwenden.
- Die Animationsgeschwindigkeit wird durch jeden Effekt festgelegt. Es gibt keine Einstellung für die Übergangsdauer.
Schaltflächentext, Alternativtext, Symbol und Styling
Stellen Sie die Schaltflächentext und ein Link-url Mit der üblichen neuen Registerkarte und Nofollow-Optionen Jeder Effekt außer Standard zeigt einen Alternativer Schaltflächentext Feld für die Hover-Nachricht Fügen Sie ein Symbol Vor oder nach dem Text mit Symbolabstand In KnopfstileStellen Sie Breite, Typografie, Tastenpolsterung, Rand, Randradius, Kastenschatten und Symbolgröße ein und wählen Sie dann Text-, Hintergrund- und Symbolfarben für Normal und Hover.
- “Get Started”, das sich bei hover in “It's free” ändert.
- Ein Pfeilsymbol nach dem Text, um die Richtung anzuzeigen.
- Abgerundete Pillenknöpfe mit einem Rand, der im Schwebeflug die Farbe ändert.
Elementor-Taste vs. Master-Addons-Kreativ-Taste
Das kostenlose Elementor Button Widget hat bereits Hover Animationen Hier passt jedes.
| Merkmal | Elementortaste | Master Addons Creative Button |
|---|---|---|
| Preis | Kostenlos in Elementor | 6 Effekte frei, 21 mit Pro |
| Schweben Animation | Elementor Hover Animationsliste, wie Grow, Pulse, Bob und Wobble | Benannte CSS-Effekte mit verschiebbaren Hintergründen, Rändern und geschichteten Farben |
| Texttausch im Schwebeflug | Nein | Alternativer Schaltflächentext |
| Hintergrund | Klassisch oder Gradient für Normal und Hover | Einfarbige Farben sowie Vorher-Nachher-Farben für einige Effekte |
| Übergangsgeschwindigkeit | Einstellung der Übergangsdauer | Durch jeden Effekt behoben |
| Symbol | Vorher oder nachher, mit Abstand | Vorher oder nachher, mit Abstand, Größe und Schwebefarbe |
Verwenden Sie die Elementor-Taste für Verläufe, eine benutzerdefinierte Übergangsgeschwindigkeit oder ein einfaches Wachstum oder einen einfachen Impuls. Verwenden Sie die Creative-Taste, wenn Sie einen Hintergrund-Sweep oder einen Text-Swap ohne benutzerdefiniertes CSS wünschen. Für animierte Textlinks siehe Kreative Links.
Häufig gestellte Fragen für Creative Button
Ist das Creative Button Widget kostenlos?
Ja. Das Widget und 6 Effekte (Default, Winona, Ujarak, Wayra, Tamaya und Rayen) sind kostenlos Die anderen 15 Effekte brauchen Master Addons Pro.
Kann ich es als Formularabsenden-Button verwenden?
No. Creative Button ist ein Link, kein Formular-Button Um einen Submit-Button zu stylen, verwenden Sie das Formular-Widget für Ihr Plugin, wie z.B. das Kontaktformular 7 oder WPForms Widget.
Funktionieren die Hover-Effekte auf Telefonen?
Touchscreens haben keinen Hover, daher sehen die meisten Besucher auf Telefonen den Normalzustand und gehen direkt zum Link Stellen Sie sicher, dass die normalen Farben und der Text von selbst funktionieren.
Kann ich die Geschwindigkeit der Hover-Animation ändern?
Nicht im Panel Jeder Effekt hat sein eigenes Timing, Sie können es mit benutzerdefiniertem CSS auf der Schaltfläche ändern, oder verwenden Sie das Elementor-Tasten-Widget, das eine Übergangsdauereinstellung hat.
Wie unterscheidet sich das von der Elementor Button Hover Animation?
Die Elementor-Taste bewegt die ganze Taste, zum Beispiel wachsen oder pulsieren Creative Button-Effekte animieren das Innere der Taste, wie zum Beispiel ein einrutschender Hintergrund oder das Ändern des Textes in Ihren Alternative Button Text.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
