Jan 18 2013

Pure CSS3 Buttons
Comments Off on Pure CSS3 Buttons

Years ago I combined various techniques to create custom buttons that worked cross-browser and were compatible with IE6+. With IE6-8 usage waning, I’ve added a new project on GitHub that recreates these same buttons using CSS3 instead of images.

The CSS Buttons project uses pure CSS to replicate the buttons from the Custom Buttons project, and is tested in IE9+, Safari, Firefox, and Chrome.

The markup is similar to the custom_buttons project,

The markup for styling a <button>:

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

And the markup for styling an <a>:

<a href="#" class="button large_button">Submit</a>
<a href="#" class="button large_button primary">Submit</a>
<a href="#" class="button large_button disabled">Submit</a>

The result from the examples:

Get the code on GitHub.

Sorry, the comment form is closed at this time.