Beautiful CSS buttons with icon set

Do you like simple and clean design? Take a look at this collection of buttons for your website.

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:

<a href="#" class="button">
<span class="add">Add to your bookmark</span>
</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:

<a href="#" class="button">
<span class="delete">Delete this bookmark</span>
</a>

<a href="#" class="button">
<span class="user">Add to friends</span>
</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...):

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

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

/* -------------------- */
/* CLASSES */
/* -------------------- */
.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
...

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