FX – Button Line Hover

The FX – Button Line Hover widget adds line-based animations to buttons. This effect adds a classy element of motion and interest while remaining subtle. Since this widget does not use solid color backgrounds or borders, consider this widget when your site design calls for something unique or elegant.

Note: this widget is intended for text-based buttons only. If you’re looking for animated buttons with the more traditional solid background or border, check out the FX – Button Hover widget.

Preview: https://demo.wocode.com/fx-button-line-hover

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the button to be seen.
  • You may align the widget left, center or right in the Design settings in the widget options. Alternatively, you may reduce the size of the widget container (using the blue grab handle) and then use the alignment setting in the context menu by right-clicking on the widget.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: If you’re using multiple FX – Button Line Hover widgets on the same page, it is important to use Unique ID’s for each widget.
  • Button Style: This allows you to select from 15 different button styles.
  • Button Label: this is the text that appears on the button.

DESIGN SETTINGS

The Design section allows you to customize the look of the button and hover effect.

  • Button Alignment: Sets the alignment of the button to the left, center or right.
  • Vertical Padding / Horizontal Padding: These settings add padding to the top or sides of the button, effectively changing the size of the button.
  • Line Color: This sets the color for the animated line.

The remainder of the Design settings allow you to style the button using colors, borders, font styling and more. These settings are self-explanatory and will not be covered here in detail.