Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Just some other awesome CSS3 buttons

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 buttons.css
README.md

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.