CSS Buttons demo

Feel free to enlarge font sizes and try the :hover effect.

This is a blue button

This should be a green button

Big Text

Bigger Text

Form Example

Here is the HTML source for these examples (view page source for full source including javascripts and CSS):



<p><a href="#" class="btn blue">This is a blue button</a></p>
<p><a href="#" class="btn green">This should be a green button</a></p>
<p><big><a href="#" class="btn blue big">Big Text</a></big></p>

<form method="post" action="#">
<fieldset>
<legend>Form Example</legend>
<div><input type="text" /></div>
<div><textarea cols="40" rows="10"></textarea></div>

<p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p>
</fieldset>
</form>


Original article: Scalable CSS Buttons Using PNG and Background Colors