EverWeb Widgets HTML5

Smooth Rollover Image Button Link

Smooth Rollover Image Button Hyperlink

Image Rollover CTA

This widget creates a smooth rollover image CTA type button. The transition is made smooth by applying a CSS transition to the hover.
Both images need to be cropped to the same size before importing them into EverWeb and should be the exact size of the finished button.
The button is a hyperlink which can be set to open the linked page or file in a new window.
The image change on hover is achieved by stacking the two images - one on top of the other - and then reducing the opacity of the top one to zero on hover.
The hover text can be different from the text shown on page load.

Widget Settings

The widget settings are shown in the screenshot to the right.
The button can have a corner radius and a border which is adjustable for color and width.
A box shadow can also be set with controls for color and radius.
The hover transition is set in tenths of a second.
The button text and hover text share the same font family and size but can have different colors.
The text is positioned inside the image by adjusting the values for "top" and "left".
Enter a relative of absolute file path for the hyperlink and check the box if it is required to open in a new window.

Get The Widget

Widget Settings

Smooth Rollover Button widget
Smooth Rollover