In this guide, we will show you how to add a “Link Hover Effects widget” to your Elementor website. The Link Hover Effects widget makes it easy to style your text links with trendy micro-animations, transforming plain hyperlinks into visually engaging elements that encourage user interaction and elevate your site’s design. Perfect for enhancing engagement and creating a polished, modern look, this free widget allows you to add dynamic link effects without writing custom CSS.
Let’s explore the customization options available in the “Link Hover Effects widget” for Elementor below.
Elementor Creative Button Hovers Tutorial Video (Step by Step Guide)
Add a Free Link Hover Effects to Elementor
Add a Free Link Hover Effects Widget to an Elementor Page
Elementor Link Hover Effects Widget General Settings
Text
Enter the text for the link.
Styles
Choose a pre-defined hover effect style:
Side Borders
Border Slide Up
Border Slide Down
Text Rollover
Border Top Slide Down
Border Top Slide Up
Border Translate
Border Left to Right
Border Circle
Dotted Border
Border Rotate
Text Zoom Out
Text Fly In
Text Hover Color
Border Crossed
Border Fly In
Alignment
Set the horizontal alignment of the link:
Center
Left
Right
Link
Enter the URL for the link. Click the gear icon for link options.
Elementor Link Hover Effects Widget Style Settings
Typography
Click the pencil icon to adjust the font family, size, weight, and other text styles.
Text Color
Select the normal state color for the link text.
Hover Text Color
Select the color for the link text when hovered over.
Border Color
Select the normal state color for the link's border (if applicable to the chosen style).
Hover Border Color
Select the color for the link's border when hovered over.
Link Hover Effects Widget Design Examples For Elementor
Here are some live use cases for the Link Hover Effects widget.
Team Member Card with Link Hover Effects.
Particles Background with Link Hover Effects.
Thank you for using the Link Hover Effects widget for Elementor! This powerful tool adds trendy micro-animations to your text links, transforming plain hyperlinks into visually engaging elements that encourage user interaction and elevate your website’s design. With a variety of built-in animation styles, seamless integration, and free availability, it fits perfectly into your site’s style without the need for custom CSS. For questions or inspiration, feel free to reach out or explore our demo.
