Discussion on Beauttons - Beautiful CSS3 Buttons


eduvoindo does not currently provide support for this item.

16 comments found.

Thanks FlashCube! :)

Best looking buttons i’ve seen! Great work! I’d like to incorporate these into my site over the ones I already have.

Thank’s geek3. Appreciate your comment. Drop me an email with your integration if you like, so I can see them at their new home :)


nice work, thinking about purchasing them…how about the crappy ies? IE6 /7, what happens to the buttons? Are they still usable (even when not as beautyful…)?

Being honest haven´t tested on ie6/7 (my virtual box is not working at the moment).

But as far as I can judge it, buttons will render without the gradient effects, without the text-shadows, without box shadows and round corners.

So you will have a normal, boxy button with the correctly positioned icons and one background color. All of them have a background color for the gradient non complient browsers to falllback to.

Anyway I’ll test them with ie6/7 and have a look later. Or if you do buy them and do not like the end result, please contact me and I’ll try my best to improve the end result


Hi eduvoindo,

About your button, you know what i can say.

Nice, very nice.

Sound good for me, your explanation with ie6/7 was clear.

I will give a chance to your buttons.

Thanks claude. Hope you like them :)

Any doubts, drop me an email

What is the easiest way to insert my customize icon? I have made the icon file as yours, how do I add the css style in my html?

Hi ives9999. Thanks for the purchase. So the best way:

Take my _RAW_PNG_icons.png and edit it. Add your icon to the top of the 6th column. Save it as icons.png (flatten). Now open beauttons.css and look for the last icon lines (line #782 to #788)
/******  ICON BRICKS  ******/
.ico-bricks .icon:after {
    background-position: -64px -550px;
.ico-bricks:hover .icon:after {
    background-position: -64px -575px;
Copy the entire block and past it just below. Now replace where it says “bricks” by your icon name. Be unique. Also set the correct coordinates, for the background position. For example:
/******  ICON BRICKS  ******/
.ico-MY_ICON .icon:after {
    background-position: -80px 0px;
.ico-MY_ICON:hover .icon:after {
    background-position: -80px -25px;
The positions are really simple. Every column is 16px wide and every row is 25px high. Your new icon will be the 61st so will be placed in the first row of the 6th column. And the hover icon will be the 62nd so will be placed on second row of the 6th column. Hope it was helpful… It is easy ;)

Thanks mate. Purchased

Thank you :)

Hey Eduvoindo, just purchased your buttons and love them! I’ve got just a tiny problem: my theme seems to influence the button’s on-click duration. When clicking on the buttons on my website, instead of immediately “pressing down” as in the demo, there is a small lag before the buttons get pressed down.

Do you know how to fix this?


Hi kkanedaa

To be honest, i don’t really know. I think I had something similar with what you are saying when was developing Beauttons, but I can’t really remember.

It’s a strange error or behavior, because the “effect” of pressing down is done simply with a :active selector and adding 1 pixel to top. So it’s strange…

Do you have it online so I can have a look at it? Thanks kkanedaa.

Sent you a PM with the website URL . Thanks for the support :)

1. in your compatible browser’s list, you mentioned nothing below IE8 . Do the buttons totally break below that version or are they still presentable and useable?

2. Do these buttons have a ‘Disabled’ state option?

3. Is there an option to sometimes only have a button with the icon and not text?

4. Does this CSS style work on an input tag button?

Hi alikapadia.

1. The button will still work. Nothing too fancy is happening there. Just CSS3 properties. box-shadow and border-radius will not work. Background uses and linear-gradient but I included a fallback background-color and also included a filter property (doesn’t W3C validate) but will make some style to IE7 and under.

2. Not they don’t have a disabled state. Good tip ;)

3. No there isn’t. Another good tip. It’s easy to make it happen tho.

4. Out of the box, it works but without the icons. Thing is, the icon is used with a span tag inside the button or a tag, and input does not have any inner html.

Thanks for your interest alikapadia. Best regards, Eduardo


Thanks for the reply. I have some forms that could use buttons with icons on their input submit tag. If you ever plan on making something that makes that happen, I would love to get my hands on that :)

hello have looked at your buttons, and thinking of buying, but i need to know if it is possible to have a button with a dropdown menu? and can the menu be like a container so i can put what ever i want in it?

rgds Martin

Hi Jespersgaard.

There are no dropdown I’m afraid. It needs javascript for that purpose and this collections is simple CSS buttons.

Thanks for your interest.

Regards, Eduardo

eduvoindo, SPECTACULAR !!! – fantastic work!

One REALLY dumb question… I have been playing around with the hover and trying to get the buttons to have a background color on hover?

Can you point me to the line of code?

Thanks eduvoindo

Update: I added this to the .button:hover:

.button:hover {
    text-decoration: none;
    color: #444;
filter : progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#eeeeee');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999), color-stop(1, #eeeeee));
    background-image: -webkit-linear-gradient(top, #999999 0%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #999999 0%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #999999 0%, #eeeeee 100%);
    background-image:-o-linear-gradient(top, #999999 0%, #eeeeee 100%);
    background-image:linear-gradient(top, #999999 0%, #eeeeee 100%);

Hi MarkPrima, thanks for the purchase.

Sorry for the late answer. Glad you found out where to tweak.

regards, Eduardo

how do i install these? i have no knowledge of css

Hi enterhiro.

Thanks for your purchase.

Well css does not need to be installed. And I wonder, if you have no knowledge of CSS why did you buy a CSS buttons pack ?

I can’t teach you how to use them, because that would take weeks. Thanks.

i bought them because i wanted to learn how to use something like this on my blog and i really like the design of these buttons

So far i have -

Added the icon.png to the images folder in my theme folder added the css code to my stylesheet.css

change image directory in css to reflect my own

but my buttons to not show correctly on the page

Hi enterhiro.

Well you have done almost everything, as far as I can see.

Can you put it online, so I can have a look? Send me an email.


These are lovely! Would it be possible to have the icon in full colour all the time rather than just on mouse over?

Hi MSFX . Thanks for the purchase and kind comment :)

Well that is quite a little bit of hard work (not complicated, just annoying). So let take the first icon for example (beauttons.css line #251) it reads something like this:

/******  ICON LIKE  ******/
.ico-like .icon:after {
    background-position: left 0;
.ico-like:hover .icon:after {
    background-position: left -25px;

Now copy the lihe of the hover to the one above, so it becomes like this:

/******  ICON LIKE  ******/
.ico-like .icon:after {
    background-position: left -25px;
.ico-like:hover .icon:after {
    background-position: left -25px;

That’s it, now repeat the process for all the icons (line #260 to #782). I told you, annoying job :P

You’re a 5* Star, thanks!


Hello… just buy the script, is there any option for input type button?

Hi webhouse.

Thanks for your purchase. Well unfortunately there is no option for input. Although that is possible with some tweaks.

Best regards, Eduardo