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 codeStep 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>
<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>
<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;
}
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;
}
...
/* 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 codeRelated content
See also:
CSS Message Box collection
Perfect pagination style using CSS
I am 
I'm reading this blog for a while now. Some of your tricks are neat, but they are sometimes not as smart as they could be. (I like them anyway.)
For this specific solution it would be better to use multiple classes on the anchor. there is no need for the span.
sure, you have to add the background to every icon, but if you use css-sprites it doesnt matte. by using such a simple background even the filesize should stay small enough.
I would use < a class= "button add">Text< / a>
and combine your css-code.
like: .button{ height, width, etc + text-indent & also background! }
& overwrite the (general) image with a.add{ background-image: url(...) }
if you use sprites, you also state the background in your .button-class and overwrite the background-position on the specific icon-classes
(read more about sprites on alistapart.com)
why? because less is more and html should never be added just for stylistic purpose if there is a way to do it in css.
hope I could provide some useful information and I'm sorry if I was too harsh in the beginning.
I like the way you present your post. Great work!
@floarian: thanks for your suggest :) It's true.
I've been following your tutorials for a while too and I agree with Florian Pichler - I do love the tricks you show us though a few or them could be executed in a better way.
The buttons do look schweet! Problem is, they don't stretch to accommodate for long text. But that can be modified to use sliding doors so no biggie.
But I definitely love how you try highlight what's going on using circles, pointers and arrows. The visuals are a plus!
I really enjoy your blog and appreciation for clean web designs.
Do you mind sharing what tools you use to prepare your posts?
I really like how you 'draw' handwriting on the picture(s).
Please share and please keep writing!!!
I do the same thing as florian, non the less, this blog is still great. Keep the good work up. Btw do i have to beg for you to write a blogspot theme making tutorial
And what about different width of button...
Your blog is simply the great...I like each and every post of your blog and saved them in delicious. Keep the good work man....
Very beautiful, as usual, but why no use a generic selector for the span:
a.button span { background:none no-repeat 10px 8px; text-indent:30px; display:block; }
And then a smaller class declaration for each different button. For example:
.add { background-image:url(img/add.gif) }
.delete { background-image:url(img/delete.gif) }
.user { background-image:url(img/user.gif) }
:)
Great presentation for the post - I really dig it.
Yep. What Florian and yaili said.
I try to avoid the span tag as much as possible. nice post though.
Is there any way to have the buttons next to each other without wrapping?
Antonio -
I really do like your posts,
but...could you please always include
a DEMO or examples page,
for all your posts?
It makes it easier to visualize the end result/s...
Thanks!
Ray
San Francisco
Another very informative post as usual. Even the comments are informative too. Keep it up!
http://social-network-web-design.blogspot.com
@Antonio your tutorial its great and you are humble enough to take advices. Great site. The comments are great to... Great people are attracted to great blogs :)
Hi,
Does someone have an idea to have a non fixed width?
I made up a solution useing comments that I saw here but I couldn't post it because Blogger prevented me from posting code!
Anyway, I posted it on my blog:
http://sabbour.wordpress.com/2008/07/03/clean-css-buttons/
I couldn't think of a way to align the buttons horizontally, any help?
Cool!
That's exactly what I was looking for. Thanks.
Belli davvero, grazie!
Nice post, Nice Blog however agree with florian. Sprites are the way to go.
nice work :) thanks
Nice read.
Thanks for sharing. It is an interesting post.
Great button, but i can't display any other html element in the same line of the button!
Hi there,
nice cool design, but i need to apply this on the submit button so that it can post the form. How can I do that.
You design is ment on link. I need this design for submit button can I do this??
Nice buttons. Really nice. Question though. What is that handwriting font that you used in your examples? Love it.
Hi Antonio,
I'm having hard time trying to adapt the css in order to display the button inline. Basically I have a inline form and I would like to display the button to the right of the last textfield.
I have played with the display attribute but I can make it works.
Any idea about that?
Thanks
Nice tuts buddy. :) Great share.
No one here who can make those beautiful buttons flexible in width and maybe make them appear next to each other?