How To Use The Creative Button Widget By Atomic Addons

The Creative Button widget by Atomic Addons adds a single link button with an animated hover. When a visitor points at it, a second color fills the button: either as soft blobs that melt together (Gooey) or as a panel that slides across (Reveal). This guide covers adding the widget, setting the text and link and choosing the effect.

Enable the Creative Button Widget

Creative Button is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Creative Button. You can also open the Creative category.

4. 4

   Turn the Creative Button widget on.

5. 5

   Click Save Settings.

Add the Creative Button Widget

Creative Button works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Creative Button. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Creative Button

Open the widget and go to Content → Creative Button:

1. 1

   Style: The hover effect. Gooey, the default, fills the button with three round blobs that rise and run together. Reveal slides a solid panel across the button, and the label gives a small bounce.

2. 2

   Text: The button label, “Read More” by default. It accepts dynamic tags.

3. 3

   Link: Where the button goes, # by default. Use the gear icon to open the link in a new window or add nofollow. It accepts dynamic tags too.

4. 4

   Alignment: Left, center, right or justified, per screen size. Justified stretches the button to the full width of its column.

5. 5

   Button ID: An optional HTML id for the button, typed without the #, for example to track clicks or to point a script at it. Keep it unique on the page, using letters, numbers and underscores without spaces.

Style the Creative Button

The effect itself is set on the Style tab, in the Creative Button section:

• Fill Direction — Gooey only: whether the blobs rise To Top (the default) or drop To Bottom.
• Reveal Direction — Reveal only: which way the panel sweeps across the button: To Left (the default), To Right, To Top or To Bottom.
• Normal tab — text color, background color, border, border radius, padding, box shadow and typography of the button at rest.
• Hover tab — the text color on hover, the Background Color of the fill (the blobs or the sliding panel), the border color, a box shadow and one of Elementor’s Hover Animation effects such as Grow or Float.

By default the button is outlined at rest and fills with near-black on hover, with the label turning white.