NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ
for more details.
Here's a little bit of CSS
to create a button that expands when you hover over it. I used this over at travelblog.ws
to create a 'Home'
button that expands to allow the user to jump directly to specific parts of the home page. All of this is using pure CSS
This is what the button looks like normally...
...and when I hover over it, it expands to show two additional detail buttons...
The cut down version of the CSS
without all the additional styling is below, but first some HTML
is required. The HTML
below is cut down to the bare essentials so it won't look exactly like in the screenshot. There is an outer DIV
element that has an inner DIV
and a link, the inner DIV
holds the detail links.
Lets see the CSS
that makes this possible...
Now the CSS
is cut down again to just the bare essentials so the border, padding, etc are not shown.
The way this works is by default the inner DIV
is not shown, but when the mouse cursor hovers over the home button, the inner DIV
is changed to be visible. Simple!
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
If you spot something out of place, please do let me know.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to this disclaimer
Other posts you may like...