Notes on this design 11-10-07
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.
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