FX – Button Hover

The FX – Button Hover widget reveals smooth, modern animations when users hover over buttons on your site. Button transitions create a lively and interactive feel to your site and draw users to your calls to action. With more than twenty animation styles and full button styling control, you can be sure your brand will be fully complimented.

Preview: https://demo.wocode.com/fx-button-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 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 21 different button styles. As you browse different button styles, keep in mind that some styles may require styling adjustments in order for the style to look best. The default style settings will not work well for all 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.
  • Background Width / Button Height: These set the width and height of the button. But keep in mind that these settings do not apply to all button styles. Only the Janus, Skoll, Helene and Rhea styles are affected by these settings. See the Vertical Padding / Horizontal Padding settings below to further control the size appearance of the button.
  • Vertical Padding / Horizontal Padding: These settings add padding to the top or sides of the button, effectively changing the size of the button.

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.