Beautiful CSS buttons with icon set

06-06 ||  Readers: 2

More articles from:

http://woork.blogspot.com/feeds/posts/default Woork
72     1

I love clean design and in general simple solutions to design nice and attractive elements for my websites. This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set. The result is something like this:



Simple, clean and nice. Click on the link below to download the source code ready to use in your web projects.

Download source code


Step 1: HTML Code
You can design this kind of buttons using this simple structure: a link (<a> tag) with a span tag inside, in this way:

http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"><a href=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">#"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"> class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"button"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">
<span class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">add"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">>Add to your bookmarkhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"></span>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">
</a>

You can replicate this structure for all buttons you want to add in your page:



...where link tag (<a>) is the "container" of the button:




...and class property for span tag is equal to CSS class which contains in CSS background propery the icon you want to apply to the current button:




For example, you can define new buttons in this way:

http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"><a href=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">#"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"> class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"button"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">
<span class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">delete"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">>Delete this bookmarkhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"></span>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">
</a>

http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"><a href=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">#"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);"> class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"button"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">
<span class=http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">user"http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">>Add to friendshttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"></span>http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 153, 0);">
</a>


Step 2: CSS Code
This is the CSS code for button "container" which includes the button background and how the button looks (font, width, height...):

http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">a.button{
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">backgroundhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">url(img/button.gif)http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">displayhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">blockhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"> colorhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">#555555http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">font-weighthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">boldhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"> heighthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">30pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">line-heighthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">29pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">margin-bottomhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">14pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">text-decorationhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">nonehttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);"> widthhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">191pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">}
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">a:hover.button{
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">colorhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">#0066CChttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">}

...and now we can add some classes to design each button in this way:

http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(153, 153, 153);">/* -------------------- */
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(153, 153, 153);">/* CLASSES */
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(153, 153, 153);">/* -------------------- */
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);"> .add{
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">backgroundhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">url(img/http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">add.gif) no-repeat 10px 8pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">text-indenthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">30pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">displayhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">blockhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">}
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);"> .delete{
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">backgroundhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">url(img/http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">delete.gif) no-repeat 10px 8pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">text-indenthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">30pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">displayhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">blockhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">}
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">.user{
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">backgroundhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">url(img/http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="font-weight: bold;">user.gif) no-repeat 10px 8pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">text-indenthttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">30pxhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(0, 0, 153);">displayhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">:http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(51, 51, 255);">blockhttp://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">;
http://feeds.feedburner.com/~r/Woork/~3/303247233/%3Cspan style="color: rgb(204, 51, 204);">}
...

For each class, you can set background property with the icon you want, directy from your preferred icon set. In this example I used Proxal Icon Set V2, a very clean and nice icon set I found on Deviantart. Thake a look here for the original link to this icon set.

Download source code


Related content
See also:

CSS Message Box collection
Perfect pagination style using CSS

Like this article? Click “Recommend” to let others know your interest. Click "Tool Box"-> "Save" to add this article as your favourite.

Articles: