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?
- Did you know you can link MailChimp to your Moonfruit site? How-to
- 10 best business website templates Creative
- Did you know you can add a poll, quiz or survey to your website? How-to
- Did you know you can add tables to your website? How-to
- 14 of the best food and drink websites made with Moonfruit Creative
One Response to “How to create rollover buttons”
Add a comment