This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, June 2, 2008

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

blog comments powered by Disqus
Florian Pichler said...

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.

Anonymous said...

I like the way you present your post. Great work!

Antonio said...

@floarian: thanks for your suggest :) It's true.

Arnold said...

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!

Dave said...

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!!!

stfalx said...

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

michal said...

And what about different width of button...

Roshan Bhattarai said...

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....

Yaili said...

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) }

:)

Matt Radel said...

Great presentation for the post - I really dig it.

spaceghost65 said...

Yep. What Florian and yaili said.
I try to avoid the span tag as much as possible. nice post though.

Kevin Jensen said...

Is there any way to have the buttons next to each other without wrapping?

Anonymous said...

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

Social Network Web Design said...

Another very informative post as usual. Even the comments are informative too. Keep it up!

http://social-network-web-design.blogspot.com

Ariel said...

@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 :)

Anonymous said...

Hi,

Does someone have an idea to have a non fixed width?

sabbour said...

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?

Anonymous said...

Cool!
That's exactly what I was looking for. Thanks.

Napolux said...

Belli davvero, grazie!

Anonymous said...

Nice post, Nice Blog however agree with florian. Sprites are the way to go.

ahmbay said...

nice work :) thanks

orlando said...

Nice read.
Thanks for sharing. It is an interesting post.

Anonymous said...

Great button, but i can't display any other html element in the same line of the button!

Anonymous said...

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??

A said...

Nice buttons. Really nice. Question though. What is that handwriting font that you used in your examples? Love it.

macsig said...

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

Fuad Ahasan Chowdhury said...

Nice tuts buddy. :) Great share.

Mathias said...

No one here who can make those beautiful buttons flexible in width and maybe make them appear next to each other?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News