Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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, no JavaScript required.

This is what the button looks like normally...
hoverbtn1.png


...and when I hover over it, it expands to show two additional detail buttons...
hoverbtn2.png


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.
 HTML
<div class="tb_home_btn">
<div>
<a href="/home"><i class="fa fa-newspaper-o"></i></a>
<a href="/journeys"><i class="fa fa-map-o"></i></a>
</div>
<a href="/home"><i class="fa fa-home"></i></a>
</div>




Lets see the CSS that makes this possible...
 CSS
.tb_home_btn div {
display: none;
}
.tb_home_btn:hover div {
display: inline-block;
}


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!

-i

Skip down to comments...
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.
 
comments powered by Disqus
Other posts you may like...