BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Creative Button Pro

How to set up and style the Creative Button widget in Elementor.

Creative Button is a call to action button with 13 hover effects, an optional second line of text, an icon, four sizes and a repeating attention animation. Use it for the main action on a landing page, a pricing section or a hero.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Add the Creative Button widget and enter the Text and the Link.

  2. Optional: add a Second Line, pick an Icon and set Icon Position.

  3. Choose a Size and an Alignment.

  4. Open Effects and pick a Hover Effect. For Text Swap also fill in Text on Hover.

  5. Optional: choose an Attention Animation and set Repeat Every (seconds).

  6. In the Style tab set the normal and hover colors, the fill or effect color, border, radius and padding.

Content options

Button

Option What it does
Text The main button text.
Second Line Optional smaller text under the main text.
Link Where the button goes.
Icon An optional icon, an arrow by default.
Icon Position Places the icon before or after the text.
Size Small, Medium, Large or Extra Large.
Alignment Left, Center, Right or Full Width, per device.
Button ID An optional ID without the # sign. It must be unique on the page.

Effects

Option What it does
Hover Effect Picks one of the 13 hover effects, or None.
Text on Hover The text shown on hover with the Text Swap effect.
Attention Animation None, Pulse, Bounce, Wobble or Heartbeat.
Repeat Every (seconds) How often the attention animation repeats, from 1.5 to 15 seconds.
Bright Addons Pro

Unlock this and 70+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Button

    typography for both lines, normal and hover text color, background, fill or effect color, hover border color, shadow, effect speed, border, radius and padding.

  • Icon

    size, spacing, color and hover color.

Tips

  • Icon Slides In needs an icon. Without one the button falls back to no hover effect.

  • The hover color control changes with the effect: fill effects use Fill Color, and Draw the Border, 3D Press, Glow and Moving Gradient use Effect Color.

  • The attention animation stops while the button is hovered and for visitors who prefer reduced motion.

  • Screen readers always read the main Text. The Text on Hover copy is decorative.

Questions and answers

Which hover effects are included?

Fill From the Left, Right, Bottom, Top and Center, Diagonal Sweep, Draw the Border, Shine, Icon Slides In, Text Swap, 3D Press, Glow and Moving Gradient.

Can the button have two lines of text?

Yes. Fill in Second Line and style it with Second Line Typography in the Style tab.

What happens if I leave the Link empty?

The widget prints a plain button element instead of a link, which is useful when a script handles the click.

Can I change how fast the hover effect runs?

Yes. Set Effect Speed (ms) in the Hover tab of the Button style section, from 100 to 1500 milliseconds.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides