Article - Customizing Button Hover State (Mouseover Effects)

You can add mouseover effects to your button. These effect are displayed when visitors hover their mouse over your buttons.


Adding mouseover font color change effect:

1. Click on the button to open the Button panel.

2. Select Style.

 

3. Select Font.

 

4. Click on Hover State on the Font heading.

 

5. Use the color pick to select the desired mouseover color effect.

6. Select the desired font style.

Changes are auto-saved and will apply automatically. 


Adding mouseover background color change effect:

1. From the Style panel, select Background.

 

2. Click on Hover State on the Background heading.

 

3. Use the color picker to select the new desired color.

4. Check the Gradient box to set the background as a gradient. Click on the color boxes to select the color ranges to fill the page. The colors produced by a gradient changes continuously with position to produce a smooth color transition appearance.

Changes are auto-saved and will apply automatically. 


Adding mouseover background image change effect:

1. From the Style panel, select Background.

 

2. Click on Hover State on the Background heading.

 

3. Click on Change to upload or select the mouseover background image.

4. Select the desired repeat options.

Changes are auto-saved and will apply automatically. 

 

Adding a mouseover border change effect:

1. From the Style panel, select Border.

 

2. Click on Hover State on the Background heading.

 

3. Use the color picker to select a border color.

4. Use the Width slider to set the border width. You can also enter the numeric value, in pixels, in the text field.

5. Use the Corners slider to edit the curvature of the corners. You can use this to create rounded corners. You can also enter the numeric value in the text field provided.

Changes are auto-saved and will apply automatically. 

 

Adding a mouseover shadow change effect:

1. From the Style panel, select Shadow.

 

2. Click on Hover State on the Background heading.

 

3. Use the color picker to select a shadow color.

4. Use the horizontal offset slider to edit the horizontal offset. You can also enter the numeric value in the text field provided. A positive value means the shadow is drawn to the right side of the button; a negative value means the shadow is drawn to the left side.

5. Use the Vertical offset slider to edit the vertical offset. You can also enter the numeric value in the text field provided. A positive value means the shadow is drawn below the button; a negative value means the shadow is drawn above.

6. Use the blur slider to edit the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is.  A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.

7. Use the spread slider to edit the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.

 

Changes are auto-saved and will apply automatically. 
 

Published: September 8 2015

Found in Categories