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 Writer

More posts by this author


5 Responses to “How to create rollover buttons”

  1. Bert Breeze

    This is a great tip and something that is really brilliant. Thanks for showing us.

    Any more tips and tricks?

    Best,

    Jason

    Reply
    • Steven

      Hi Jason,

      We’ll be adding more ‘how to’ articles regularly – keep an eye on the blog for more :)

      Cheers,

      Steven

      Reply
  2. Steven

    To be pedantic, that’s not a rollover! I got excited that I might be able to make a multi-state object rather than changing the opacity of a button to show an underlying object.

    Regarding buttons, do you know how to make them display at the pixel dimensions input to the editor? I need to make buttons at a given size to fit a layout and they keep changing?

    Reply
    • Amita Parikh

      Hi Steven,
      Thanks for the feedback. For any technical queries you will have to contact the customer support team by submitting a support ticket via your account. Let us know if you have trouble doing this.
      Thanks,
      Amita

      Reply

Add a comment

  • (will not be published)

More posts by this author