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!
Hope you found this post useful...
...so please read on! I love writing articles that provide beneficial information,
tips and examples to my readers. All information on my blog is provided free of
charge and I encourage you to share it as you wish. There is a small favour I ask in return however -
engage in comments below, provide feedback, and if you see mistakes let me know.
If you want to show additional support and help me pay for web hosting and
domain name registration,
donations, no matter how small, are always welcome!
Use of any information contained in this blog post/article is subject to this disclaimer
Other posts you may like...