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.
Go to the article
In order to create the icons, this set of CSS3 buttons uses HTML entities.
- 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.
<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.
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.