There is 1 item in your cart.

Total products $ 17.80

Total shipping $ 12.43

Total $ 32.78


Create Hover Buttons in VIGO

Hover buttons are a great way of adding some "movement" to your website and to add something different to your website's design.

Call to actions are very important on any website as you probably want your website visitors to complete a specific task while on your website - this could be anything from subscribing to a newsletter, filling in a contact form or buying a product in your online shop.

Hover buttons are awesome for call to action buttons as they stand out, making them more "clickable" than other content.

Before I show you how to make a hover button, here are some examples of beautiful hover button designs.
As you can see, hover buttons can come in different shapes, styles and sizes. It is important that they always suit the look and feel of your website.


With VIGO, adding your own hover buttons are very easy. Firstly, you'll need to use an image editing program to create the buttons. You can use something like Photoshop, or free online tools like

You'll have to create two images - one for the default state, and one for the hover state (when the mouse hovers over the image). Always make sure the images that you use are exactly the same size. Save both images separately, preferably in .png or .jpg format.

1. Log into your VIGO Dashboard and navigate your way to the page editor of the page you're working on.

2. Select a new row layout and click "add content".

3. Select the Button icon, as highlighted below.
Create and Add a Website Hover Button
4. Now you have to upload both images.

"Default Image" refers to the image in its default state - when the user's mouse is NOT hovered over the image.
"Hover Image" refers to the image in its hover state - when the user's mouse is hovered over the image.
"Link" - Enter the link to which the user will be directed as he clicks the hover button.
"Animation" - select an animation effect for your button - the best is to play around with it and find the option that works best for your website.
"Speed" - the speed, in seconds, at which the animation effect will take place.

Click the save button.
Add a Hover Button to your website
You can now view your new button on the page that you were working on. If you need to change the animation, images or the link, simply edit the content block and save it again.

If you need help with other aspects of VIGO, feel free to email us on


VIGO on TwitterVIGO on FacebookVIGO on InstagramEmail Us

comments powered by Disqus


VIGO on FacebookVIGO on InstagramEmail Us

Need to get in touch?

Operations & Admin | +27 21 824 1620 | Sales & Support | +27 21 824 1621 | Design Studio | +27 21 824 1622 | Email |

VAT # 4310274958