This is a variation of Design Test 16 I decided to play around with. I saw buttons like this on the Windows Live website, and wanted to see if I could duplicate the cool hover effect using only CSS. I am trying to create a bar with links similar to the example below:
The menu in the image is actually a two-row menu, but in this design I am only focusing on the top bar with the link boxes. There are a couple elements I was unable to easily duplicate; most notably the double border on each link box. If you look closely at the Windows Live design, you will see there are two borders on the lefthand hovered link: a grey outer border and a light blue inner border. This is impossible to do with just CSS, and I did not want to make an image for each link.
There are several reasons why I did not want to do this. The major reason is that I did not want to create a background image for each link. In my design I just have one sliver of a background gradient that is repeated for all the links. The other reason is that this design is now expandable: If I change the words in the links I do not need to do anything with the image. Likewise, if the size of the text is increased or decreased a couple points the background image will still look alright. The Windows Live site will resize the background images if the text size is changed, but it looks like they use javascript to perform the change.
I did encounter some browser quirks when designing this page, mainly with Internet Explorer. If you hover over the links you will notice that a white border pops up. The default state for this border (when the mouse is not hovering over the link) is transparent. Internet Explorer, however, hates transparency and so would always show the border. I corrected this by throwing in a conditional stylesheet for IE, where it would completely cut out the border (by resetting it to 0px) when no hover was active. This messed with the padding/margins, so I had to tweak those too. It turned out pretty well, however.
Return to Code Tests Page.