Creative · Elementor
Creative Button widget for Elementor
A button with extra shapes and hover treatments beyond Elementor’s default button.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A button with extra shapes and hover treatments beyond Elementor’s default button.
render() writes HTML data attributes: data-text.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Creative Button”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Style”, “Effects”, “Effects (King Addons Creative Btn Paris Effect)”, “Effects (King Addons Creative Btn Rome Effect)”. Style and Content tabs are listed on this page.
When to use it
- A campaign landing CTA.
- A download button with an icon morph.
- A nav “book a call” control.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Creative Button — Style | The chosen value is read in render() and applied on the front end. Options: London; Paris; Rome; Icon-Slide; Icon-Show. |
| Creative Button — Effects | The chosen value is read in render() and applied on the front end. Options: Elevate; Glide; Fresh Start; Illuminate; Morph; Cascade; Flourish; Radiate. |
| Creative Button — Effects (King Addons Creative Btn Paris Effect) | The chosen value is read in render() and applied on the front end. Options: Serene; Zephyr; Prism; Ember; Apex; Vortex; Brilliance. |
| Creative Button — Effects (King Addons Creative Btn Rome Effect) | The chosen value is read in render() and applied on the front end. Options: Fill; Slide In Down; Slide In Right; Slide Out X; Slide Out Y; Diagonal. |
| Creative Button — Effects (King Addons Creative Btn Icon Show Effect) | The chosen value is read in render() and applied on the front end. Options: Back In Left; Back In Right; Back Out Left; Back Out Right. |
| Creative Button — Effects (King Addons Creative Btn Icon Slide Effect) | The chosen value is read in render() and applied on the front end. Options: Slide In Top; Slide In Down; Slide In Left; Slide In Right. |
| Creative Button — Text | Printed in the widget HTML from render(). |
| Creative Button — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Creative Button — Icon for the button | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Creative Button — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Common — Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 0, max 1000). |
| Common — Icon Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 500). |
| Common — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-creative-btn`. |
| Common — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-creative-btn, {{WRAPPER}} .king-addons-creative-btn.king-addon…`. |
| Common — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Common — Stroke Width | Spacing/size control (min 1, max 10). |
| Common (Normal) — Text Color | Color written to this widget’s CSS selector. |
| Common (Normal) — Background Color | Color written to this widget’s CSS selector. |
| Common (Normal) — Border Color | Color written to this widget’s CSS selector. |
| Common (Normal) — Circle Color | Color written to this widget’s CSS selector. |
| Common (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-creative-btn`. |
| Common (Hover) — Text Color | Color written to this widget’s CSS selector. |
| Common (Hover) — Background Color | Color written to this widget’s CSS selector. |
| Common (Hover) — Border Color | Color written to this widget’s CSS selector. |
| Common (Hover) — Circle Color | Color written to this widget’s CSS selector. |
| Common (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-creative-btn:hover`. |
| Common — Padding | Writes CSS (padding, king-addons-creative-btn-effect-serene, king-addons-creative-btn-effect-zephyr, king-addons-creative-btn-effect-apex) onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Creative Button actually change on the page?
A button with extra shapes and hover treatments beyond Elementor’s default button. Inspector labels from this widget’s PHP include “Style”, “Effects”, “Effects (King Addons Creative Btn Paris Effect)”, “Effects (King Addons Creative Btn Rome Effect)”.
How do I add Creative Button in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Creative Button”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related creative widgets
Pulsing Button
A CTA with a pulse animation so it reads as the next action on a busy page.
Auto-Scrolling Text
A CSS marquee for a short phrase or logo strip. Keep the text short; this is not a blog loop.
Styled Text Builder
One text block with per-span styling and motion, instead of several heading widgets.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Magnetic Buttons
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Creative Button after you activate it.