CSS Borders and Padding on Button Links

These work on all browsers (ok 6+ ones!). However, IE6 had some padding issues with #5, but that's IE6 for you! Also some of the roll-over/hovers don't work in IE6.

I've used a combination of hovers on the examples, so please look at the css (in this file) to see what I've done. Because of the way the roll-over/hovers are done in the css, you can get two states of roll-over/hover if you move the mouse slowly, but do it quick and it's pretty smooth!

Example #1

Simple two colour buttons (Border on 'a' with padding on 'li')

link 1
link 2
link 3
link 4
link 5

Example #2

Roll-over buttons (Border and padding on 'a' with padding 'li')

link 1
link 2
link 3
link 4
link 5

Example #3

Same as #2 but vertical

link 1
link 2
link 3
link 4
link 5

Example #4

Triple Borders! (Border and on padding on both 'a' and 'li')

link 1
link 2
link 3
link 4
link 5

Example #5

In a block of text. You need big line-height to use this!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example #6

Floating as 'fake' buttons (Using only borders on a 'span' and 'a')

Some example text: link 1

Some example text: link 2