Expand on hover button using only CSS

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...

...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.

HTML

<div>

</div>

</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