EverWeb Codebox logo

EverWeb Widgetbox 3

Button Link Animate On Scroll

Scroll FX Button Hyperlink Widget

Scroll FX Button Hyperlink

This widget creates a button hyperlink which animates in on scroll.
The button can have a transparent background and a box shadow to enhance its visibility when inserted on a parallax background.
The hyperlink can be set to an internal page or an external page or file and has the option to open in a new window.
Go to the DEMO page to see it in action.

Parallax scroll fx html5 text widget

Widget Settings

Enter the button text, adjust the width using a drag handle or the Metrics inspector and use the value for TB Padding to adjust the height.
Enter the font family name and check the box if it is Google hosted.
Choose a suitable web safe fallback font and set its size, color and hover color.
Open the color window and choose the required background color.
Open the "Color Sliders" tab to get the RGB color numbers and enter them into the widget settings.
Set the background opacity.
Set the corner radius.
Set the box shadow color and radius if required.
For in internal link to a page of the website, use the "Link to:" control to set it.
For a link to an external page or file, check the box and enter a relative or absolute URL.
For either type of link, check the box if it is to open in a new window.
Choose the animation type.
Set the animation duration.
The animation duration for this - and any other animated widgets on the page - should be left until immediately before publishing the page.
NOTE: When the animation duration is set, the contents of the widget will fade, disappear or do something weird depending on the animation type and duration.

Parallax scroll fx html5 text widget

This widget is included in the Scroll FX widget pack.