Creative Links
A standard blue underline link does its job, but it forgets to make an impression. In today’s web, every interaction is a chance to engage. Master Addons Creative Links Element turns ordinary text links into miniature works of art. Choose from over 22 unique hover effects – from subtle underline slides to dynamic 3D transformations – and apply them to anywhere in your landing page. Style every part of the effect, control the icon, and create a micro-experience that makes clicking feel fresh and intentional.
Extensive Library of Hover Effects
This is the heart of the element. Move beyond simple color changes. Select from a curated list of sophisticated Effects that trigger on hover. Want a classic Bottom Line Slide? A playful Three Dots reveal? A dramatic 3D Slide or Text Fill effect? Each effect applies a distinct CSS animation to the link text and its pseudo-elements, creating everything from elegant to bold interactions. This library lets you add personality and polish to your menus, table of contents, or feature lists without writing a single line of code.
- 22+ Pre-Built Effects: Instantly apply animations like Border Switch, Scale Down, Circle, Cross, and Move Up.
- Range of Styles: From subtle (Bottom Border Enlarge) to bold (3D Effect, 2nd Text and Border Reveal Push Out).
- Easy Application: Select an effect from a dropdown—no complex configuration needed to get started.
Styling for All Link States
Achieve pixel-perfect design by styling each component of the link effect. Set the base Typography, Link Padding, and overall Width. Then, dive deep into state styling. Define Text Color and Background Color for both Normal and Hover. Crucially, style the colored elements used in the effects: the Span BG Color, Before BG Color, and After BG Color. These control the backgrounds of the animated pseudo-elements that power effects like sliding lines, filled backgrounds, or expanding circles. Add Border Radius and Box Shadow to complete the look.
- Dual-State Design: Independently control colors and backgrounds for the Normal and Hover states.
- Effect Component Styling: Directly style the Before, After, and Span backgrounds that create the animation visuals.
- Full Typography Control: Choose font, size, weight, and spacing for the link text.
- Shape & Depth: Use Border Radius and Box Shadow to soften or elevate the link’s container.
Frequently Asked Questions For Creative Links
What’s the difference between "Link Text" and "Alternative Link Text"?
The Link Text is what’s always visible by default (e.g., “Our Services”). The Alternative Link Text is what appears or interacts during the hover effect. In effects like “Text Fill” or “Border Switch,” this alternative text might slide in, replace, or animate alongside the original text, creating a dynamic change.
Can I use these creative links as my website’s main navigation?
Absolutely! They are perfect for header menus, especially for minimalist or creative site designs where you want the navigation itself to be a visual feature. Just add each menu item as a separate “Item” in the Contents repeater.
What are the "Before BG Color" and "After BG Color" for?
These are the secret ingredients. Most advanced CSS hover effects use ::before and ::after pseudo-elements to create the animated shapes, lines, or background fills. These color controls let you directly style those hidden elements, allowing you to match the effect’s colors to your brand. For example, in the Bottom Line Slide effect, the After BG Color might control the color of the sliding underline.
Do the effects work on mobile (touchscreen) devices?
Yes, they are fully functional. On touch devices, the hover effect is typically triggered on the first tap (the “hover” state), and the link is followed on the second tap. This is standard behavior for hover effects on mobile. You get the animation feedback before the page changes.
How do I choose the right effect?
Consider your site’s personality:
- Professional/Corporate: Use subtle effects like Bottom Line Slide or Border Translate.
- Creative/Portfolio: Go for bolder effects like 3D Slide, Circle, or Text Fill.
- Modern/Minimalist: Bottom Border Enlarge or Scale Down work beautifully.
Preview a few – the best effect enhances the link without feeling distracting.
Can I apply different effects to different links in the same widget?
The screenshots show one global Effects dropdown, suggesting all links in one widget instance share the same chosen effect. To have different effects (e.g., one link with a circle effect, another with a slide effect), you would likely need to place multiple separate Creative Link widgets.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
