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.
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’.
OK. Now add a ‘Link button’ through ‘Insert’-> ‘Link button’ and place it over the icon/arrow.
With the ‘Link button’ still selected, go to the ‘Editor’-> ‘Style’, choose ‘Normal’ and make the base colour of the button totally transparent.
Do the same to the text.
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.
Then, reduce the opacity of the rollover button by about 50%.
Make the text totally transparent (set to 0%).
And link the ‘link button’ to the appropriate page.
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?
5 Responses to “How to create rollover buttons”
Add a comment