Creative Links

Most text links do one thing on hover: change color. The Elementor Creative Links widget from Master Addons gives you a lot more to play with, brackets that slide in around the words, a fill that sweeps across the text, a 3D flip, and a dozen other hover effects you can drop on any link without opening a CSS file.

Below, we’ll add the widget, go through every Content control, cover the Style options, and run down the effect list. Screenshots from the editor come with each step. First, here’s where the widget sits in the panel.

What the Creative Links widget does #

It takes a plain inline link and makes it move. The Creative Buttons widget styles a solid, padded button. Creative Links is the text-link version: a “Read more”, a nav-style call to action, or a single phrase you want to stand out inside a sentence. The animation fires on hover, and you choose it from one dropdown.

You also get an optional icon, an alternate label that some effects reveal, alignment controls, and a Style tab with typography, border, and a set of color options built around the link animations. It’s in the free Master Addons collection, so it runs on any Elementor site. The full widgets and extensions list has the rest.

Rather see it before reading every setting? Here’s the widget in action.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to it? Start with the installation guide.
• A page or template open in the Elementor editor.

How to add the Creative Links widget #

This part is quick:

1. Open a page with Elementor and click the widget panel icon (the grid) in the top-left.
2. Type Creative Links in the search box, or scroll down to the Master Addons category.
3. Drag the Creative Links widget onto the canvas.

It lands with placeholder “Click Here” text, ready for you to edit.

Content settings explained #

Select the link and open the Content tab. This is where you set the text, the effect, and where the link points.

Effects #

The Effects dropdown is the whole reason to use this widget. Pick one and the link animates on hover. The list runs past 20 options:

Brackets, 3D Effect, Bottom Line Slide, Bottom Border Enlarge, Slide In, Border Slide Down, 2nd Border Slide Up, Border Translate, 2nd Text and Border, Reveal Push Out, Text Fill, Circle, Three Dots, Border Switch, Scale Down, Fall Down, Move Up, Cross, 3D Slide, 3D Slide Down, and a couple more.

The names don’t give much away, so hover the link in the live preview to see what each one does. Brackets and Text Fill work well in body copy. The 3D options are louder and fit headings or a hero link.

Item Alignment, Link Alignment, and Back Text Alignment #

Item Alignment positions the whole widget (Left, Center, Right). Link Alignment and Back Text Alignment handle the link text and the alternate label that some effects bring in. All three are responsive, so you can set them per device with the toggle.

Link Text and Alternative Link Text #

The Link Text is the visible label, say “Click Here”. The Alternative Link Text (“Go!” in the screenshots) is the second label that swaps in on the effects that reveal one. Keep it short, since it only gets the space the animation leaves behind.

Icon and Icon Spacing #

You can sit an icon next to the text, then set the gap with Icon Spacing. Master Addons bundles eight premium icon libraries, so there’s plenty to pick from right inside Elementor.

Link URL #

Drop the destination in Link URL. The gear icon next to it holds the usual options: open in a new tab, add nofollow. For an on-site link, paste any page from your own site.

Style settings explained #

Switch to the Style tab and open Link Styles. This is how the link looks before and after the animation.

• Width and Icon Size: size the link box and the icon on their own.
• Typography: font family, size, weight, and letter spacing for the label.
• Link Padding: spacing inside the link area. It also gives some effects room to animate.
• Border Type, Width, Color, and Radius: a lot of effects ride on a border (Brackets, Border Slide Down, and the rest), so these count more here than on a normal link.
• Box Shadow: depth on the link box if you want it.

Normal and Hover colors #

The color controls split into Normal and Hover states. Alongside the usual Text Color and Background Color, you’ll see Front BG Color, Before BG Color, and After BG Color. Those extra layers are what the slide and fill effects animate between, so set them when you want to control the color that shows mid-animation.

Seeing an effect in action #

Here’s the Brackets effect on the canvas. Hover the link and a bracket slides in on each side, so “Click Here” reads as “[ Click Here ]”. Every effect behaves like this in the live preview, which makes it easy to try a few before you commit.

Tips for using Creative Links #

• Match the effect to the spot. Subtle ones like Text Fill or Bottom Line Slide sit well in paragraphs. Save 3D Slide and Cross for headings and hero areas.
• Watch the BG colors. Front, Before, and After backgrounds can wash out your text mid-animation, so check the link stays readable through the whole effect.
• Keep the alternate label short. A long Alternative Link Text gets cramped in the space the animation leaves.
• Don’t forget touch. Hover doesn’t fire on a phone, so the resting state has to look finished on its own.

Need a full solid button instead of a text link? That’s the Creative Buttons widget. Want a heading, description, and button together? Look at the Call to Action widget.

Frequently Asked Questions #

Wrapping up #

The Elementor Creative Links widget gives your text links real movement: 20+ hover effects, an icon, and color controls tuned to the animations, none of it requiring code. Pick an effect, set the colors, and your links stop just sitting there. From here, the rest of the Master Addons widget library is worth a look.