Animated Link

The Animated Link widget lets you add interactive links with animated hover effects to your Elementor pages. It includes 15 animation effects and supports text links with optional icons, images, or Lottie animations before and after the link text.

Use the widget for navigation links, calls to action, featured links, and other interactive text elements without adding custom CSS.

Content

Content

  • Effect: Choose from 15 available animation effects for the link.
  • Text: Enter the text to display as the animated link. Dynamic tags are also supported.
  • Link: Enter the destination URL. You can also use a dynamic tag and configure the standard Elementor link options, such as opening the link in a new window or adding nofollow.
  • Align: Set the link alignment to left, center, or right. The alignment can be configured separately for different devices.
Animated Link widget’s Content section with the Effect, Text, Link, and Align controls visible

Icon

The widget allows you to add optional media before and after the link text.

Before Icon

  • Graphic Type: Choose whether to display no graphic, an icon, an image, or a Lottie animation before the link text.
  • Icon: Select an icon from the icon library or upload an SVG file.
  • Image: Select or upload an image and choose its image size.
  • Lottie Animation: Add a Lottie animation using an external URL or a JSON file from the Media Library. You can also enable loop or reverse playback.
  • View: Depending on the selected graphic type, choose the available display view and shape options.

After Icon

The After Icon controls provide the same options as the Before Icon controls, but display the selected icon, image, or Lottie animation after the link text.

Icon section with one Before Icon and one After Icon configured.

Style

  • Color: Set the default color of the link text.
  • Hover Color: Set the link text color on hover.
  • Style Color: Choose the color used by the selected animation effect. Depending on the effect, this may control an underline, border, background, decorative line, or other animated element.
  • Padding: Adjust the space inside the animated link. Responsive settings are available.
  • Typography: Customize the font family, size, weight, transform, style, decoration, line height, and letter spacing.
  • Transition Duration: Control how quickly the selected animation effect plays.
Animated Link Style section with Color, Hover Color, Style Color, Typography, and Transition Duration visible

Before Icon

This section appears when a graphic is selected under Before Icon.

  • Icon Gap: Adjust the space between the before icon and the link text.
  • Use the available style controls to customize the selected icon, image, or Lottie animation. The controls vary according to the selected graphic type and include normal and hover styling where applicable.
Before Icon Style section with Icon Gap and the graphic styling controls visible.

After Icon

This section appears when a graphic is selected under After Icon.

  • Icon Gap: Adjust the space between the link text and the after icon.
  • Use the available style controls to customise the selected icon, image, or Lottie animation. The controls vary according to the selected graphic type and include normal and hover styling where applicable.
After Icon Style section with Icon Gap and the graphic styling controls visible

Check out a demo page of Animated Link.