How do I create these buttons

I came across this site and would love to be able to have similar buttons to the colored ones they’ve got with letters in. When you rollover them words pop up.

Does anybody know how I could do this, ideally with images instead of letters but then still have a word pop up when you rollover them? I’ve looked on google but haven’t found anything that’s similar

Hi,

In that example they are using JS to hide and show the elements but you can do this all with css for modern browsers.

You could rotate the text for ie9 using one of the proprietary filters or just let old IE have it horizontal.

1 Like

Thank you that’s exactly that I’m after!! I’m guessing I can change the letter to an image too?

I don’t mean to be a pain but if I’ve got more than one word it puts them on separate lines, is it possible to stop that and have all of the words on one line?

You can add white-space:nowrap; to “.expand b”

Perfect!! Thank you

If you are using an image instead of the vertical text then you won’t need the transforms and would just need to place the image at left:0;bottom:0.

Thanks I’ve added that to a test site and it looks fab! Thank you

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.