Elementor animeret knap widget med Creative Hover effekter
Creative Button er en gratis Master Addons widget til call-to-action knapper med en indbygget hover animation. Vælg en effekt fra listen Button Effects, skriv teksten og en valgfri anden besked til hover, tilføj et ikon, og stil de normale og hover farver. Det gratis plugin indeholder 6 effekter: Default, Winona, Ujarak, Wayra, Tamaya og Rayen. Master Addons Pro tilføjer 15 mere, fra Pipaluk til Shikoba, for 21 i alt.
Sådan tilføjes en animeret knap i Elementor
Du skal bruge Elementor og det gratis Master Addons plugin fra WordPress.org.
- Kontrollér, at Creative Button er slået til under Master Addons, Widgets.
- I Elementor-editoren skal du søge efter Creative Button og træk det ind på siden.
- Vælg en effekt i Knap Effekter og hold markøren på knappen for at få vist den.
- Skriv Knapteksten, den alternative knaptekst og Link-URL'en.
- Tilføj et ikon og vælg Før eller Efter.
- I fanen Stil skal du indstille polstring, grænseradius og forskellige Normal- og Hover-farver, så animationen er nem at se.
For en længere gennemgang med udvidelser som værktøjstip og afsløre animationer, læs Sådan oprettes Elementor animerede knapper. Hver indstilling er i Creative Button-widgetindstillinger.
21 Hover Effekter: 6 Gratis, 15 med Pro
Hvert navn i Knap Effekter er en anden CSS hover animation, såsom en baggrund, der glider ind, en kant, der tegner rundt om knappen eller tekst, der skifter til en anden besked. Standard, Winona, Ujarak, Wayra, Tamaya og Rayen er gratis. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite og Shikoba har brug for Pro. Hold knappen på lærredet for at forhåndsvise hver enkelt.
- Knapjustering og knaptekstjustering, indstillet pr. enhed.
- Ekstra Før og Efter baggrundsfarver til effekter, der bruger lagdelte baggrunde.
- Animationshastighed er fastsat af hver effekt. Der er ingen overgangsvarighedsindstilling.
Knaptekst, alternativ tekst, ikon og styling
Indstil Knaptekst og a Link URL med den sædvanlige nye fane og nofollow-indstillinger. Hver effekt undtagen Standard viser en Alternativ knaptekst felt til svævemeddelelsen. Tilføj en Ikon før eller efter teksten med Icon Spacing. I Knap Styles, indstil Bredde, Typografi, Knappolstring, Kant, Kantradius, Kasseskygge og Ikonstørrelse, og vælg derefter tekst, baggrund og ikonfarver for Normal og Hover.
- “Kom i gang”, der ændres til “Det er gratis” på svæve.
- Et pileikon efter teksten for at vise retning.
- Afrundede pilleknapper med en kant, der skifter farve på svæve.
Elementor Knap vs Master Addons Creative Knap
Den gratis Elementor Button widget har allerede svæve animationer. Her er hvor hver enkelt passer.
| Feature | Elementor Knap | Master Addons Creative Button |
|---|---|---|
| Price | Gratis i Elementor | 6 effekter gratis, 21 med Pro |
| Hover animation | Elementor Hover Animation liste, såsom Grow, Pulse, Bob og Wobble | Navngivne CSS-effekter med glidende baggrunde, kanter og lagdelte farver |
| Tekstbytte på hover | No | Alternativ knaptekst |
| Baggrund | Klassisk eller gradient til Normal og Hover | Ensfarvede, plus Før og Efter farver på nogle effekter |
| Overgangshastighed | Indstilling for overgangsvarighed | Fastgøres af hver effekt |
| Ikon | Før eller efter, med mellemrum | Før eller efter, med mellemrum, størrelse og svævningsfarve |
Brug Elementor-knappen til forløb, en brugerdefineret overgangshastighed eller en simpel vækst eller puls. Brug Creative Button, når du vil have et baggrundssweep eller et tekstbytte uden brugerdefineret CSS. For animerede tekstlinks, se Kreative Links.
Ofte stillede spørgsmål til Creative Button
Er Creative Button-widgetten gratis?
Ja. Widget og 6 effekter (Default, Winona, Ujarak, Wayra, Tamaya og Rayen) er gratis. De andre 15 effekter har brug for Master Addons Pro.
Kan jeg bruge det som en formularindsendelsesknap?
Nej. Creative Button er et link, ikke en formular knap. For at style en send knap, brug formular widget til dit plugin, såsom den Kontaktformular 7 eller WPForms widget.
Virker svæveeffekterne på telefoner?
Touchskærme har ingen svæve, så de fleste besøgende på telefoner ser den normale tilstand og går direkte til linket. Sørg for, at de normale farver og tekst fungerer på egen hånd.
Kan jeg ændre hastigheden på svæveanimationen?
Ikke i panelet. Hver effekt har sin egen timing. Du kan ændre den med brugerdefineret CSS på knappen, eller bruge Elementor Button widget, som har en Transition Varighed indstilling.
Hvordan er dette forskelligt fra Elementor Button hover animationen?
Elementor Knappen flytter hele knappen, for eksempel vokse eller pulse. Creative Button effekter animere indersiden af knappen, såsom en baggrund glider ind eller teksten skifter til din Alternative Knap Tekst.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
