Create Link Buttons with simple CSS and HTML

How?

Just one image, two tags, and some CSS rules
Please view source to see how the CSS works
Tested and compatible with IE6, Opera9, Firefox 2.0, Safari 2.0

Syntax of the HTML

<div class="btns"> <a href="#" class="btn" ><span>button</span></a> </div>

Why?

Many developers hate nested DIVs and SPANs for round corners and tired of fighting with designers

Example : default style

button 7 button 8 button 9 button 10 button 11 button 12

Example : random texts

«san vehi » « vehicula quam. Pellen » «san vehicula qu » « vehicula quam. Pelle » «n vehicu » «an vehic »

Example : different colors

button 7 button 8 button 9 button 10 button 11 button 12

Example : different colors and font sizes

button 7 button 8 button 9 button 10 button 11 button 12

Note

For IE developers, don't forget to check No More IE6 Background Flicker, too.