How-to

How to create rollover buttons

Rollover buttons

Add your own interactive links in less than five minutes…Let the good times roll.

It’s a question sent our way on an almost daily basis: “How do I add rollover buttons to my site?” Well, we have our own basic buttons to choose from, but you can also use these to adapt other images and graphics.

Here’s how:

Log-in to your site and add an image to the page. This can be any icon or graphic that you’ve created, sourced or chosen from our library. For the purposes of this tutorial, we’ll be using the large ‘Arrow’ icon found through ‘Insert’-> ‘Widget library’-> ‘Icons’.

Rollover

OK. Now add a ‘Link button’ through ‘Insert’-> ‘Link button’ and place it over the icon/arrow.

Rollover

With the ‘Link button’ still selected, go to the ‘Editor’-> ‘Style’, choose ‘Normal’ and make the base colour of the button totally transparent.

Rollover

Do the same to the text.

Rollover

Click on the ‘Rollover’ button and make that rollover state the same colour as your background, using the colour picker tool should you need to.

Rollover

Rollover

Then, reduce the opacity of the rollover button by about 50%.

Rollover

Make the text totally transparent (set to 0%).

Rollover

And link the ‘link button’ to the appropriate page.

Rollover

Finally switch to ‘View mode’ to see your new rollover button in action.

Pretty good, hey? Anyway, get your creative hats on, give it a go and let us know how you all get on in the comments section below.

Not built a site yet? What are you waiting for?


Andy Siddons
Content Producer

More posts by this author


Add a comment

  • (will not be published)

More posts by this author