Custom styled buttons using images (compatible with older browsers)
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Custom Buttons

While browser default buttons are perfectly fine in many instances, there are times you want to give your buttons a little more class. Styling buttons to behave predictably in all browsers is rather tricky.

This project contains HTML/CSS to change the visual style of both the <button> and <a> tag using a button class. It aims to use semantically correct markup and maintain the various button states (in supported browsers).


There are two different button examples -- a large and small button.

Tested in IE6, IE7, IE8, Safari, Firefox, and Chrome.

Large Button:

<button type="submit" class="button large_button"><span>Submit</span></button>
<a href="#" class="button large_button"><span>Submit</span></a>

Small Button:

<button type="submit" class="button small_button"><span>Submit</span></button> 
<a href="#" class="button small_button"><span>Submit</span></a>

Add the primary class to make a button bolded:

<button type="submit" class="button large_button primary"><span>Submit</span></button>

Add the disabled class to make a button faded:

<button type="submit" class="button large_button disabled"><span>Submit</span></button>


A lot of what I've done is based on previous work demoed in these articles, and their comments:


Copyright (c) 2012 Derek DeVries

Released under the MIT License