Skip to content
Just some other awesome CSS3 buttons
Latest commit 9c8d006 Nov 24, 2011 @thugsb readme please branch
Failed to load latest commit information. readme please branch Nov 24, 2011
buttons.css CSS cleanup and link correction Nov 24, 2011

Just some other awesome CSS3 buttons

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons.

View demo

Go to the article

In order to create the icons, this set of CSS3 buttons uses HTML entities.

Why use entities rather than images?

  • Faster loading, because we’re talking about text here.
  • Scalable, depending on font size.
  • Styles as color and background are easy to update via CSS.

Minimal markup

<a href="" class="button">Button</a>

Simple button, with no icon.

<a href="" class="button add">Add</a>

Note the add class adds the plus icon.

Rendering & browsers support

The icons are added using the :before pseudo-element. Therefore, you won’t see any icons in browsers like IE7 and below, but the buttons will look good yet.

Please suggest improvements and/or additions that should be made. Also let me know if you branch it to use different colours (or other?). Thanks!

Written by Red

Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. Stay tuned for latest updates, subscribe to RSS and follow him on Twitter.

The CSS has been copied to github without the author's permission, in order to create a backup and allow branching for colour themes and additions.

Something went wrong with that request. Please try again.