CSS Buttons

Some (heavily commented) examples of reusable CSS buttons.

Buttons

A simple hyperlink <A> button
A simple hyperlink <A> button
A simple hyperlink button
A hyperlink with Generated Content This is fun! Handy
'Inset': Fx/Chrome/Opera 10.5+ A square button A rounded button A bullet button A small button A large button

Eject OK Delete Left Right   Look ma!, No extra span! -> Checkerdiecheck!

A simplecombinedbuttonbar

A simplecombinedbuttonbar

A squarecombinedbuttonbar

A simplecombinedbuttonbar

A simplecombinedbuttonbar

The button bar below is identical, but in an unordered list: better accessibility and better semantically, but be careful with whitespace because of the inline-block!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. simply dummy text of the printing and A simple hyperlink button typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. A simple hyperlink button since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.