Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

button states

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).


The image below shows how the button will display in different browsers.


Button States

  • normal state = gradient with border and shadow styles.
  • hover = darker gradient
  • active = gradient is reversed, 1px down, and darker font color as well.

button states

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
.button:hover {
	text-decoration: none;
.button:active {
	position: relative;
	top: 1px;

button general styles

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient.

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

button general styles

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

  • First, copy the .button and .blue CSS (view demo source code).
  • Then, add class="button blue" to the HTML element where you want the button to be (eg. <a href="#" class="button blue">Button</a>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.



Apr 22, 2010 at 6:05 am

Thanks these buttons look great! I have made some fancy buttons to (no css3) check out this link

Apr 22, 2010 at 6:22 am

Wow, awesome buttons. I’ll use them instantly for some of my projects – thanks!

Apr 22, 2010 at 6:24 am

Very nice tutorial! Great job!

Martijn: With all do respect, your solution isn’t even comparable with this.
In fact, is’t been commonly used for over 3-4 years and is found all over the web, (i.e use of .png images and background-position). This solutions uses ONLY css and no images which decreases number of requests to the server and the download-time in the long run :-)

Pedro Ivo
Apr 22, 2010 at 6:28 am

What is the name of this handwriten typeface you use in your articles? I’d appreciate if you could tell me! Thx! ^^

Marco Barbosa
Apr 22, 2010 at 6:29 am

Quite simple, nothing new.

But it’s good to see another example of CSS3 usage !

Apr 22, 2010 at 6:32 am

Sehr gut – bitte so weitermachen :-)

Apr 22, 2010 at 6:46 am

Yesterday I made a similar button with CSS3 gradients and and :active state, too, but you hit it! Very cool stuff!

Kev Adamson
Apr 22, 2010 at 7:01 am

My only qualm with using gradients on buttons at the moment is that you currently lose the -webkit-transition on hover. Unless I’m missing something. It certainly doesn’t work for Safari and Chrome Windows.

Anyone know when transitions between gradient backgrounds is likely to be in place?

Apr 22, 2010 at 7:01 am

I guess you should add -ms-filter for IE8+

Beside that, this technique is perfect :)

Apr 22, 2010 at 7:16 am

Beautiful Site, I really like it.

Apr 22, 2010 at 7:24 am

I’m new to your site and love the content so far! These buttons are great, love the use of all CSS and HTML. Thanks for sharing!

Apr 22, 2010 at 7:39 am

Great tut Nick. I’ve seen a few like this over the last few days, but yours is the neatest by far. Could the same code work to create a circular button I wonder?

Apr 22, 2010 at 8:03 am

Great piece Nic and the #smashingmag tweet could not have come at a better time! I’m revamping a client’s old site – and working on CSS3 buttons this am. Now I have a template to start from! Saved me at least an hour. I’ll credit you on the site.

Muchas gracias!

Jordan Walker
Apr 22, 2010 at 8:31 am

Wonderful tutorial, I am so impressed with the progressive enhancement features of CSS3

Adam C
Apr 22, 2010 at 8:34 am

I’m wondering…does adding the filter for IE eat up a lot of memory?

sarfraz raza
Apr 22, 2010 at 9:09 am

Good luck guys, really good work.

Apr 22, 2010 at 9:18 am

very nice and helpfully for a no -pictured website

Apr 22, 2010 at 9:21 am

I love them. It’s such a relief to see things done the way you know they should be. Thanks.

Apr 22, 2010 at 9:23 am

Nice tutorial.

You might be interested in another example on nice buttons witch CSS3.

Apr 22, 2010 at 9:46 am

This is great! Such a time saver. You’re amazing, thx for sharing!

Apr 22, 2010 at 10:08 am

a very well written article…..nice job

Guy At HockeyBias dot com
Apr 22, 2010 at 10:25 am

Gorgeous! Thank you!

Michael Hart
Apr 22, 2010 at 10:26 am

Thanks so much for that clear explanation. I’ve used a lot of those techniques before, but I love the idea of making the text darker on the :active state. You learn something new every day!

Apr 22, 2010 at 11:13 am

I’ve been using box-shadow to make buttons, I’ll need to try adding in the gradient effect as well! I’m really loving all the ways CSS3 can replace images. Here’s some social networking icons/buttons I made without any images at all, using CSS3.

Ed at Kliky
Apr 22, 2010 at 12:07 pm

This is actually really well done. Thanks for taking the time of clearly outlining the process here. You’ve done well to answer questions before they inevitably arise (cross-browser issues). I’ve got a project these babies can go into today.

Apr 22, 2010 at 1:38 pm

Very helpful! Thank you!

Apr 22, 2010 at 1:57 pm

thats really cool and css3 is looking powerful and good enough to make the web more better. thanks for the share

Smashing Share
Apr 22, 2010 at 2:31 pm

Very well explained. Thanks Nick La

Pam Griffith
Apr 22, 2010 at 3:05 pm

You can add an inset box-shadow to the active state to really make it feel pressed.

Editha Fuentes
Apr 22, 2010 at 4:44 pm

excelent! Thanks!!!!

Apr 22, 2010 at 6:19 pm

This is an excellent article!! One thing you haven’t covered which readers may find useful are “color stops” which give you more control over the gradient in a very easy way. Both the Webkit and Mozilla engines support color stops.

Webkit’s implementation is better in my opinion as you can specify where the stop point is e.g. for a 3 step gradient you may do something like this:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow), color-stop(0.5, orange), color-stop(1.0, red));
The first parameter in the color-stop attribute is the percentage of distance from start and end points.

Mozilla’s implementation still provides color stops but you have no control over their placement – e.g.
background: -moz-linear-gradient(left, yellow, orange, red);

Web Design
Apr 22, 2010 at 6:48 pm

wow great set of buttons thanks for this awesome tutorial

Danny Dyson
Apr 22, 2010 at 8:48 pm

All I can say is, I love CSS3!

Apr 22, 2010 at 9:32 pm

Thanks for the great css tips, & the amazingly clear explanations & diagrams. And especially for helping create more beauty on the web – functional & aesthetic!

Apr 22, 2010 at 11:46 pm

This is pretty dang awesome. Makes buttons super easy to add/manage.

Apr 23, 2010 at 12:04 am

Very nice! But it can work well in internet explorer.

Brandon Cash
Apr 23, 2010 at 12:49 am

@Shane: you can specify where color-stops are in Mozilla, too:
background-image: -moz-linear-gradient(top,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.2) 40%,
rgba(255, 255, 255, 0.0) 100%);

Hoque Md.Nazmul
Apr 23, 2010 at 12:53 am

awesome buttons using cSS3.
Thanks for sharing.

Apr 23, 2010 at 12:54 am

@Brandon – thanks for that! I wasn’t aware :)

Apr 23, 2010 at 3:56 am

Hey, nice tutorial. I have explored these possibilities as well and have recently created a wordpress plugin to create similar buttons easily. Check it out at

Apr 23, 2010 at 4:39 am

anyone has idea why:
input element in Opera 10.51
dosent work?
it hasent got text drop-shadow
its strange since other button work quite well…

Deluxe Blog Tips
Apr 23, 2010 at 6:43 am

Nice tutorial, the code is clear and easy to understand. Thank you very much for sharing, I’ll use it in my website right now.

Apr 23, 2010 at 7:24 am

What a great post! CSS3 is so neat. Thanks for this!

Calvin Tennant
Apr 23, 2010 at 9:48 am

This is very nice.

Nicolas Gallagher
Apr 23, 2010 at 10:22 am

While I don’t agree with using Microsoft filters to ape CSS3, you have omitted the declarations for IE8, e.g.:

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#faa51a’, endColorstr=’#f47a20′)”;

Paradise Planet
Apr 23, 2010 at 1:30 pm

Super cool CSS3 gradient buttons. :)

Apr 23, 2010 at 1:37 pm

Good stuff.. I’m starting to think pretty soon we won’t need PS any more :)

Apr 24, 2010 at 3:14 am

nice buttons

Apr 24, 2010 at 8:04 am

The technique is great, and you made it really easy to understand and use,
but what really amazed me was your wonderful choice of colors.

I don’t think a tutorial can be made any better than what you’ve done here!

Keep up the good work.


Apr 24, 2010 at 12:43 pm

Thanks for this, I’ll definitely try it out on my site!

Apr 24, 2010 at 2:09 pm

Simple and neat!
Thanks for putting together!

Apr 24, 2010 at 4:40 pm

wow nice sharing btw which IE version supports it???

Metal Wall Art
Apr 25, 2010 at 5:18 am

Really cute! I’m planning in making my own website and this buttons is perfect! thanks a lot!

Laurie K of
Apr 25, 2010 at 10:29 am

This is really cool, I’ll have to book mark it for the next time I’m working on web buttons.

Steve Buell
Apr 25, 2010 at 4:24 pm

Great Stuff!
Should maybe add :focus along with :hover and :active

Apr 25, 2010 at 9:18 pm

This is very cool indeed, nice way to have more styled up basic buttons on a site without using images — but it’s still very annoying you have to use all the browser specific code. :(

Thiago Cavalcanti
Apr 25, 2010 at 9:35 pm

This + and you’ve got complete coverage!
This is great!

Apr 26, 2010 at 10:07 am

I also agree that this technique is great, and you made it really easy to understand. This is a brilliant tutorial, keeping it simple by using no image or Javascript, and simply using CSS. The gradient adds a nice pop to a simple button, to add a different look to spice up your web design. The button states make it completely user friendly with the hover and active shades. The way you broke it down is brilliant for those just starting out

Apr 26, 2010 at 11:16 am

what a great idea. Im looking for some cool ideas to put on my website.

Web Design
Apr 26, 2010 at 2:01 pm

Very cool, thanks for the great detailed examples.

Ralph Mrowietz
Apr 26, 2010 at 3:20 pm

It works :-) Very nice solution. Tks a lot!

Apr 27, 2010 at 7:26 am

great work, thanks for sharing

Apr 27, 2010 at 10:29 am

Great stuff!! Thanks for this cool article. CSS3 really rocks.

Apr 27, 2010 at 11:01 am

Another brilliant, well written, well explained, and actually useful tutorial. Love that you don’t ignore cross browser compatibility / degradation as well. Thanks Nick!

Apr 27, 2010 at 11:47 am

thx for sharing nick, its works :)

Frankerson P
Apr 27, 2010 at 12:19 pm

I’m going to put this to use right now. Thanks for sharing!

Apr 27, 2010 at 1:38 pm

This article is one of the best CSS tutorials I´ve ever read! THANKS FOR SHARING THIS!
(I´m really glad I´ve joined your subscriber´s feed!)

Apr 27, 2010 at 3:30 pm

wow it’s grate topic i love it ^_^

Street Views
Apr 27, 2010 at 3:48 pm

Once again, lame IE ruins innovation by not displaying gradients. Man, this could really save a lot of page load time throughout the web if everyone could use css buttons instead of PNGs.

Justin Roberts
Apr 27, 2010 at 6:40 pm

Nice looking buttons… they’re scalable too which is a must for easy updating. Shame about IE but anybody who uses IE doesn’t deserve to see pretty buttons anyway ;)

Justin – Big Click

web design company in new york
Apr 28, 2010 at 6:53 am

very nice effect. thanks for sharing the great one. a very good tutorial 2010.

Apr 28, 2010 at 7:59 am

Nice buttons. And thanks for the code. This is awesome!
I will make smth similar for the website I’m working on. Thanks.

Web Design
Apr 28, 2010 at 9:39 pm


Alias M2K
Apr 29, 2010 at 1:42 am

Great job man!!! :)

Apr 29, 2010 at 8:44 am

Nice bit of CSS here, have just tried it and it works a treat in my decent NON IE browsers.

Even In IE however it still looks ok and has a nice gradient, just no shadow or rounded corners.

Cheers for sharing this with us… most appreciated.

Apr 29, 2010 at 4:44 pm

Brilliant and wonderful.

One problem, I am still seeing a ‘double padding’ making the button twice as wide in IE 7. Any thoughts on a fix?

Apr 30, 2010 at 8:59 am

Absolutely fantastic, thanks a lot for sharing.

devil triger
Apr 30, 2010 at 1:05 pm

beautifully, thanks :P

Pieter Kubben
May 1, 2010 at 3:39 am

Great, this one will be bookmarked & used!

Btw: compliments for the wonderful website…


Dat Tai
May 1, 2010 at 7:27 pm

Great toturial

Thanks alot

May 1, 2010 at 9:38 pm

For more compatibility to others browsers. For every property with prefix -moz or -webkit, you may also incluse the prefix “-khtml”.
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

May 1, 2010 at 10:55 pm

oh~~i love it .strong.

May 2, 2010 at 4:00 pm

wow loving these buttons :) thanks

May 3, 2010 at 2:08 am

Great job…
another site having top page rank professional HTML/CSS tutorials
see link below

Hope it’s helpful!

ubuntu administrator
May 3, 2010 at 5:07 am

Neat professional buttons! I’ll use them!

Approx. 20 line of CSS and it looks beautiful.

Thx for sharing.

ubuntu admin

May 3, 2010 at 6:37 am

very thankyou :)

May 4, 2010 at 5:49 pm

Well, I thought I would say that’s great but then it’s a bit common to say that. But really, that’s great!! Thanks for sharing.

May 4, 2010 at 7:48 pm

Hello,I’m from china .

May 5, 2010 at 11:01 am

Worked like a charm! Thanks so much.

May 5, 2010 at 11:39 am

Is there a way to get rid of the dotted line around the text when clicking on the button?
I figured I had to add outline:none to the .button:active, but I see it’s already applied to the .button?

May 5, 2010 at 12:53 pm

First of all, buttons look great.

Second, is there a way to get the form elements (input/button) to be the same height as the rest in Firefox (I’m using 3.6.3)? Open the demo in ff to see what I mean.

Isle of Man Web Design
May 5, 2010 at 2:19 pm

I like the techniques you’ve outlined here. I’ve used some css3 features in recent projects and like the way rounded corners and such, nicely degrade into simple square boxes in cruddy old IE.

Thanks for the post.

Website Design
May 6, 2010 at 7:00 am

mmmmm CS3

makes life easier!!

Antoine Guedes
May 6, 2010 at 11:40 am

So useful!
I will have a try, I must use it for my own portfolio.

Thx a lot! (:

May 7, 2010 at 3:53 pm

very good tut. thanks.

May 8, 2010 at 3:48 pm

I know you heard it often… but great work..
i’m using them now….


May 10, 2010 at 10:54 pm

Hey, thanks for such a great feature. I’m having trouble implementing it on chrome though. When I type in my button text (ie the text that shows on the button) in upper case, either just the first letter shows up or nothing at all. It works fine in firefox and IE though. I had to revert to lowercase but will really like to use all caps. Help please?

May 10, 2010 at 11:26 pm

Never mind. Just had to take out the text shadow code. Works in uppercase on chrome now.

May 11, 2010 at 1:27 am

are tutorial! thanks for sharing your knowledge.

best regards sascha

Viet Nam Software Outsourcing Services
May 11, 2010 at 11:04 pm

Beauty button and great tutorial … thanks for sharing this tip ..

Web designer
May 12, 2010 at 3:54 am

I will most definitely use these in my next project!

May 13, 2010 at 10:30 am

Hey, did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. You can also apply the CSS to the graphics created in Cool Button Designer. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.


Web Design
May 15, 2010 at 5:38 am

wow…such a nice post.. it helps alot thankx.

Tim Read
May 16, 2010 at 2:09 pm

Thanks for the tutorial. Great detail.

May 16, 2010 at 11:48 pm

thanks for the your web site i am not very good comunicate english but very simple use to your web toturials very very thanks .

May 21, 2010 at 3:43 pm

Thank you!!! Thak you very much!! You are the Lord of the Webs!! ;-)

May 23, 2010 at 11:07 pm

Thanks For all f you

May 25, 2010 at 9:23 am

Thank you!!! Thank you!!! Thank you!!! ….

May 25, 2010 at 8:40 pm

great tutorial, i never knew you could do that in pure css. It woudl be good to see how it degrades in each browser, or a browser compatability chart?

May 26, 2010 at 4:19 am

What if you want an icon-image in a input-button ánd a gradient?
Impossible right?

May 27, 2010 at 9:49 am

Anyone know how to disable the button changing sizes in ffox and IE?

May 27, 2010 at 11:33 am

Great style, it would be great to have the source files.

May 28, 2010 at 3:15 am

thank you for this lovely post is there any way we can hack IE for rounded corners

Web Designer Evan Skuthorpe
May 28, 2010 at 4:50 am

This is cool, just learning the new ropes of CSS3 so love it.

May 28, 2010 at 3:17 pm

Very good and interesting Article, but that sucks that Internet Explorer has problems with this button…

May 31, 2010 at 3:04 am

Great job! I’ve just tried it and it looks wonderful (^_^)
Love your website! Using it as a reference :-)

Jun 6, 2010 at 7:24 am

Love it, works great… Mozilla and Chrome it is perfectly fine just IE it is not perfect… but enough for use :)

Jun 7, 2010 at 4:03 am

That’s beautiful. I’ll use this technique in my next design.

CSS3 Menu
Jun 10, 2010 at 12:11 am

Great article, cool buttons! Please take a look at my new CSS3Menu, It can create similar CSS3 buttons, w/o coding. Versions for Mac and Windows are available.

Jun 10, 2010 at 1:00 am

Nice, but what is the proper CSS3 gradient property once it is all finally supported?

David Chambers
Jun 14, 2010 at 3:16 pm

Don’t forget to include a hover state for keyboard junkies!

Jun 15, 2010 at 4:01 am

nice tutor…

Jun 16, 2010 at 5:25 am

Also, for Opera you can use a box-shadow inset to simulate a gradient on the button. Just set the bg color, set the inset shadow, then declare your gradients. It’s not perfect, but looks better than plain color…

Oliver Rumpf
Jun 19, 2010 at 9:35 am

Very great!
Thanx a lot


Jun 21, 2010 at 6:45 pm

Great tutorial. will try it out :)

Jun 23, 2010 at 9:53 pm

Is the only way to actually submit a form with this technique to use javascript?

Jun 26, 2010 at 5:08 am

thats great art. great job dude

Jun 26, 2010 at 11:50 pm

it’s like u make a shadow.. :D cool….

Jun 27, 2010 at 1:15 am

Nice, but what is the proper CSS3 gradient property once it is all finally supported?

Jun 27, 2010 at 8:09 am

thanks for the tutorial about’s so helpful to me

Jun 30, 2010 at 3:29 pm

Nice tutorial ^0^

Jul 6, 2010 at 8:02 am

great tutorial, thanks..

Jul 6, 2010 at 10:57 pm

Thank you so much ..
You are very cool

Jul 8, 2010 at 12:28 am

like this tutorial, your lesson was so easy to understand :)

code pixelz media
Jul 8, 2010 at 5:16 am

very good. I like the way you present your content.

Jul 8, 2010 at 11:57 am

i still confused with some part…
may be i must learn more…
thanks, nice post
God Bless u

Jul 13, 2010 at 10:07 pm

nice info, thanks for sharing :)

Jul 14, 2010 at 11:25 pm

Thanks for sharing this. Awesome!

Jul 15, 2010 at 9:17 am

@ Randall – I just came across this post and I’m seeing the same thing with “double padding” in IE. Did you find a fix?

Great buttons otherwise!

Jul 16, 2010 at 12:18 am

I love the orange button :)

Jul 17, 2010 at 11:48 pm

this tutorial very clear, thanks

Jul 18, 2010 at 11:01 pm

yeah..that’s great design..
it’s very helpful, thanks for sharing..

Jul 19, 2010 at 1:08 am

thanks for your info. easy to understanding

will ceare
Jul 19, 2010 at 2:58 am

Nice tutorial! Easy to understand and really useful. Not really touched on CSS3 as most browsers don’t support it, but think this may come in handy. good job

Jul 19, 2010 at 8:21 pm

very good and creative….

Jul 21, 2010 at 7:51 pm

Oh, wow! Thank you so much for this! I’m still learning what you can do with CSS3. I am really happy to find this. It will help save time when designing websites and no longer having to design buttons. Thanks again for this and the other great articles on this site.

Jul 24, 2010 at 12:14 am

And I thought I was so briliant building that: Today I found yours and… the code is almost the same, anyway – gr8 article :)

Jul 25, 2010 at 9:11 am

thx for info, nice sharing

Shad Vick
Jul 27, 2010 at 12:39 am

Very handy. Thanks for sharing the code and how to please all browsers – even IE.

Jul 31, 2010 at 12:28 pm

All of these rounded corner tuts are great and fun to experiment with, but since IE doesn’t support border-radius, they have no real value…

Zoe Gillenwater
Aug 5, 2010 at 11:34 am

These are really nice looking. Great work! An improvement would be to make all the gradients semitransparent black instead of whatever color the background is. That way, the only thing you have to change to get a different colored button is a single simple hex background color. The black gradient would control the slight darkening on every single one. More flexible, less code.

Freelance Portal
Aug 8, 2010 at 10:44 am

Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.

Cheatsheets and online tutorial.

Web Design Stuart Florida
Aug 10, 2010 at 6:59 am

Very cool and simple. Really appreciated the previews in noncc3 browsers.

Aug 11, 2010 at 7:35 am

very useful, and also very nice

Aug 14, 2010 at 2:58 pm

Really nice. It’s great what you can do with bare CSS – isn’t it? Actually it would have been a bit better with the use of CSS transitions. Could be like this:

.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
transition: background 1s linear;

That gives the background a nice animation effect when its hovered. I think that should be part of a css3 tutorial.

Aug 17, 2010 at 8:33 am

Dreiden, you clearly have no idea. Have you ever heard the term “progressive enhancement”? Many very prominent sites are using border-radius already. It’s idiots like you who are holding the progress of the web back.

Web design portfolio
Aug 19, 2010 at 4:14 am

awesome, very handy to know!

Steve Piercy
Aug 19, 2010 at 4:23 pm

@randall, @Amanda –

Do not use IE8.js with these buttons as that causes a conflict with the fix cited in the above link.

Aug 23, 2010 at 9:38 am

Thanks for these great buttons, the only problem for me is that the text is black instead of white.
Any idea how to correct that ?

Deko Web
Aug 24, 2010 at 12:44 pm

Really nice tutorial, thanks for sharing…

Andrew Braithwaite
Aug 28, 2010 at 10:46 am

Really useful tutorial, simple and easy to use. I found it really useful. Thanks.

Sep 3, 2010 at 10:41 am

Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

Florian Schommertz
Sep 11, 2010 at 3:59 pm

Thx for your brief advice. Liked it and keep CSS3 coming :D

Michael Molino
Sep 13, 2010 at 8:53 am

Brilliant little bit of code! Thanks so much!

Sep 16, 2010 at 4:21 pm

thanks for sharing this code
but is there a fix to the height in firefox?
Thanks you

Sep 21, 2010 at 1:31 pm

If you add a overflow:visible to the .button rule ie7 will handle the width correctly and not have the unsightly extreme padding on the right and left.

Sep 21, 2010 at 8:52 pm

Wow! Those buttons looks cool! Thanks for sharing that!

But… is that WC3 compliant? Is that a ‘valid’ code?

Laura Hogarth
Sep 22, 2010 at 8:05 am

This is a fantastic article – thanks! Going to start using these types of buttons right away :)

ospop shoes shop
Sep 24, 2010 at 4:28 am

Really useful tutorial, simple and easy to use. I found it really useful. Thanks.

Sep 24, 2010 at 5:29 am

That’s great, dude. I love it and thanks for sharing.

Thomas Isaksson
Sep 24, 2010 at 6:53 am

It seems the filter syntax breaks things in the new Explorer 9 beta. It gives the button/form button a solid background color + the rounded borders on top of it. The end result is as you can imagine not very nice. Any ideas on how to fix this? Thanks for a great site!

Sep 29, 2010 at 4:21 am

Thankx dude it’s really cool , keep it up

Thomas Isaksson
Sep 29, 2010 at 4:53 am

I guess the alternative is to move the filter property to a IE8 only css with a conditional comment.

Oct 3, 2010 at 9:54 am

Hey guys, this script is really amazing as you say. but didn’t you experience any height problem with firefox???
i already asked that a month ago but had no answer. any tips???

Thomas Seres
Oct 8, 2010 at 8:24 am

First, thank you for sharing your work, it’s very useful !

Just a little detail I have added to your buttons for firefox :

/* delete useless outline in firefox elements */
input[type=”file”] > input[type=”button”]::-moz-focus-inner {
border: none;

With that, it will delete the dotted outline in firefox for the buttons/inputs elements.

An other detail, I put a font-weight: 600; to be more readable in chrome because the text seems to be more aliased in chrome.

Thank you !

Oct 8, 2010 at 10:17 am

Thanks a lot for the useful info! The buttons look awesome. Cant wait to use them in our app

Sachin Pandey..
Oct 10, 2010 at 7:29 am

Itzz seems to be awesom…

Oct 10, 2010 at 5:16 pm

hey Thomas, thanks for the tip to remove the useless outline in FF.
don’t you have a height issue with FF???

Kashyap Parel
Oct 11, 2010 at 1:00 am

Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

Kashyap Parel
Oct 11, 2010 at 1:00 am

Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you

Thomas Seres
Oct 11, 2010 at 2:36 am

@Reda : No, I do not have any issue with FF. Which version do you use ? I’m currently with 3.6.10.

Do you experience an issue on each html elements with a button css class or specific elements ?

Oct 12, 2010 at 2:56 pm

Hi Thomas, and thanks a lot for your answer.
I’m using FF 4 on a mac and all elements have a much bigger height, i have no problem with buttons
if you don’t see what i mean, i can send you a screen…
Thanks once again

Oct 13, 2010 at 2:58 pm

wow, my text has been cut because i put sime html tags:
“Hi Thomas, and thanks a lot for your answer.
I’m using FF 4 on a mac and all <button> elements have a much bigger height, i have no problem with <a> buttons.
if you don’t see what i mean, i can send you a screen…
Thanks once again”

Oct 17, 2010 at 6:20 pm

here is a screen of the buttons in FF:
as you can notice, the input and button elements are much higher than others…
hope you have any fix for that!

Thomas Seres
Oct 20, 2010 at 8:24 am

@Reda :

Try this :

button, .button,
button[type=”button”], button[type=”reset”], button[type=”submit”],
input[type=”reset”], input[type=”submit”], input[type=”button”] {
display: inline-block;
/* zoom and *display = ie7 hack for display:inline-block */
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0px 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
padding: 5px 13px 5px 13px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);

border-width: 1px;
border-style: solid;

font-weight: 800;
text-shadow: 0 1px 1px rgba(0,0,0,.2);

Oct 20, 2010 at 2:36 pm

Hi Thomas, and thank you for your help.
i did what you recommended but didn’t work out. you said /* zoom and *display = ie7 hack for display:inline-block */ actually the problem is Firefox.
here is a screen of the difference between Safari and FF:
and here is the page
Thanks once again

Oct 22, 2010 at 6:49 pm

hello everybody, it’s almost 2am in here and thought it would be better if i share with you what i have just discovered before i go to bed!
to solve the FF height problem all you need to do is to add the following to .button class:
font-family: your favorite font;
font-size: Xpx;
padding: 5px 10px;
font-weight: bold;

and then add this class:
button::-moz-focus-inner {
border: 0;
it’ll also solve many other problems caused by ie6&7 and also with FF such as a black border in ie7…
hope this will help some of you and also spare you some time… ;)
chears and thanks again for this nice script and also to Thomas who tried to help ;)

Nov 7, 2010 at 2:40 pm

These examples are definitely better then what I was going for and I will be utilizing them instead. These examples display the ‘box-shadow’ throughout. I am still trying to figure out if/how ‘box-shadow’ can be ‘activated’ when hovering over an element. Here is what I *was* going for:

Thanks in advance.

Nov 8, 2010 at 6:09 am

Nevermind. Got it. :/

Still going to use your gradient buttons though…

Nov 16, 2010 at 8:47 am

Has someone tried to get border radius in Internet Explorer? I’ve tried it with Curvycorners, but it doesn’t work… :-(

Nov 20, 2010 at 8:48 am

Has anyone actually, been able to get a different colour for the “clicked” button, ie visited ?

Gareth Rees
Nov 23, 2010 at 7:26 am

Excellent stuff guys. I’ve been looking for info on how to do this for a few days. You’ve explained it far better than anyone else I’ve found. Bookmarking the site.

Dec 6, 2010 at 7:18 pm

Why does this code come up as invalid css?

Heather Acton
Dec 11, 2010 at 8:57 pm

Thanks so much, Nick, for this tutorial and resource! The code works great and the buttons are beautiful. My clients are tickled, too! Much appreciated!!!

andretti brown
Dec 15, 2010 at 1:18 pm

I am currently using this technique on my website(in the nav) with some other effects.

ramit walia
Dec 16, 2010 at 9:23 am

what a nice tutorial… easy to understand! :D thanks for sharing your knowledge :D

Juno Mindoes
Dec 25, 2010 at 3:08 am

Apple’s launch of the iphone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

Dec 27, 2010 at 5:55 pm

I just want to say that I refer back to this all the time. Not only is it great for making buttons, but you have all the border, gradient, and drop-shadows laid out real nice. Its so convenient to come here, copy the text, paste, and then tweak. Thanks for putting all these rules in one spot like this!

Dec 27, 2010 at 6:41 pm

Thank you so much for this amazing content!!

Jan 3, 2011 at 3:49 am

Awesome buttons!
Thanks for sharing!

Jan 3, 2011 at 12:09 pm

This works great in FF on my PC, but on my MAC, the Gradient does no apply? Am I missing something?

Tristian Jeff Mababa
Jan 3, 2011 at 7:10 pm

Nice Work! Thanks

Jimi Dufraine
Jan 5, 2011 at 2:44 pm

Thank you soo much for this, I was pulling my hair out trying to this.
Easy explanation and thanks for the code.
Any idea how to add the when active state? if not many thanks anyway!

Jan 8, 2011 at 9:09 pm

Damn, this really is nice! Used it in my project. Awesome!

Uçak Bileti
Jan 11, 2011 at 3:08 pm

kabul et

Uçak Bileti
Jan 12, 2011 at 5:24 am

hayatmi denilir ulenn

Jan 13, 2011 at 3:16 am

Thanks for this great work! Thinking about using it.

Jan 14, 2011 at 6:10 am


Sam Rowell
Jan 14, 2011 at 2:00 pm

Brilliant tutorial and Ive now created as many buttons as there are on the demo page! Brilliant work around for the cross browser compatibility too! Thanks a bunch and now I shall do another tutorial!

Jan 15, 2011 at 3:22 am

I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

Jan 18, 2011 at 3:19 pm

I think it also helps to use border-style: outset; the button and border-style: inset; for an active button. Makes it look more 3d.

Jan 29, 2011 at 11:35 am


The image below shows how the button will display in different browsers. In this image it would seem that the CSS3 does stand out a lot better then using the other browsers. It’s clearer to see and the finish is a lot better specially with the rounded corners it also stands out more then the rest.

tütüne son
Jan 29, 2011 at 3:36 pm

Damn, this really is nice! Used it in my project. Awesome!

Jan 31, 2011 at 5:36 am

Its really nice to get buttons like this just by css. But its looks really bad in IE…
is there any condition on doctype as well for it to work in internet explorer?

Jan 31, 2011 at 10:36 am

This is wonderful – thank you!

Jan 31, 2011 at 8:09 pm

For anyone looking to include an icon with the image, simply add a small bit of CSS for your images. Here’s what I used:

.button img {vertical-align: bottom;}

You can see a sample at this link. Hope that helps!

Feb 3, 2011 at 10:22 pm

This is great work, but i wish there was disable style on it too, lots of people miss out the disable version of the button, which is important too in dynamic sites, specially with ajax involvement. if you guys can add disable version, i would really appreciate it and other people with me.

Feb 8, 2011 at 3:26 am

css3 like WordPress3.0 hit the unknown possibilities of their new. Thanx so much!!!

Feb 11, 2011 at 10:46 am

Hello :) I love this technique and have been using it a lot, so thanks. I was just wondering if you’d looked at it in IE9. It seems to display the background gradient outside the rounded corners, so you have a rounded button within a rectangular button, if that makes sense. It’s hardly a huge deal, and it might be fixed pretty soon (hopefully!) but I was just wondering if you knew any ways around this? Cheers!

Feb 15, 2011 at 5:13 pm

IE9 release coming soon and the gradient peek a boo bug is still not fixed. You will need to use a png for IE9 and disable the filter using a conditional html comment. IE9’s filters have not been updated and probably never will, as more css3 features will hopefully be added in future versions. So much for being compliant since IE said that the radius css thye support is complete???

css splash
Feb 16, 2011 at 10:47 pm

Good features! Css splash – Web design Inspiration gallery

Κατασκευη Ιστοσελιδων
Feb 19, 2011 at 5:07 am

Amazing!great examples. I am so glad that we can do nearly everything with css and reduce the amount of imgs. Thank you

Mar 14, 2011 at 5:29 am

Great side – only looking this tut but think, all other tut’s great, too!
Thx for your engagement and

Greetings from Germany :-)

Mar 14, 2011 at 5:30 am

Great site – only looking this tut but think, all other tut’s great, too!
Thx for your engagement and

Greetings from Germany :-)

Jared - Stealth Web Designs
Mar 14, 2011 at 1:36 pm

I like it, but I don’t think our designers will like having our styles down-grade. Good solution, but now now I must live in png land.

Apr 11, 2011 at 10:04 pm

There can still be a significant load time improvement by using CSS3 instead of images. Big time if you are not spriting(spelling is for people smarter than me) by avoiding another request, but even if you’ve got it in a sprite we’re still talking the difference between bytes and kilobytes. I still think there is a hefty benefit to using css3 where you can and falling back to images where necessary.

p.s. You in S’toon?

Mar 15, 2011 at 11:30 am

Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(

Mar 15, 2011 at 11:31 am

Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(

Sean T
Mar 18, 2011 at 12:05 am

I’ve added support for IE9 with these buttons via SVG + IE9 conditional style block.

Mar 29, 2011 at 9:54 am

Sean – do you have this code somewhere? Thanks!

Apr 11, 2011 at 10:08 pm

My sentiments exactly. All the hullabaloo about “the same mark-up” and we’re still needing separate IE styles, separate IE conditionals and still wasting time trying to support IE.

The bane of web development.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:21 pm

Indeed a great way to learn how to put the CSS gradient feature in a good practical use.

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:21 pm

“The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.” Wow!

Mar 21, 2011 at 5:51 pm

is not easy to put on weight

Mar 25, 2011 at 4:45 pm

This is super cool, but to create additional colors – for example brown or yellow ones – it would be interesting to know how you came up with the the color palette.

David Leicester
Mar 26, 2011 at 6:08 pm

Cheers, this is great!

Mar 28, 2011 at 1:51 pm

Great tut, im wondering if the hover state is too heavy using the gradients, specially on IE ?

Apr 7, 2011 at 2:50 am

awesome, exactly what i was looking for. THANK YOU!

Apr 8, 2011 at 4:14 pm


Apr 12, 2011 at 4:50 am


Apr 12, 2011 at 12:05 pm

Really impressive post, we will consider adding these functionality to our online button maker tool .

Beben Koben
Apr 13, 2011 at 4:46 am

so cleary in explanation…thanks master \m/

Apr 15, 2011 at 1:47 pm

Very nice! Where did you come up with the gradients? I need one with a different shade of blue. Thanks for the awesome work!

Jacob V
Apr 21, 2011 at 3:41 pm

Really nice work!

Was excited until I previewed it in IE9 on Win7 :(
Look flawless in Firefox 4 and Chrome 10 though :)

Apr 25, 2011 at 8:42 am

very impressive tutorial , i liked this new css3 feature alot .. whoha

Apr 30, 2011 at 9:04 am

Great tutorial…

Apr 30, 2011 at 1:21 pm

Simply fantastic! Thank you !!!

May 2, 2011 at 7:03 am

Awesome! Thank you for making this tutorial available. These css buttons are exactly what I am looking for. Cheers, Chris.

May 4, 2011 at 11:11 am

Nice work.
This is truly useful.

Gave you credits on my blog post –


May 5, 2011 at 9:30 am

@Jacob V

Hi all, what about the problem in IE9 (all button corners seems to be not transparent) ???

Aalaap Ghag
May 5, 2011 at 10:25 am

These buttons are hot.

Kevin John Ventura
May 15, 2011 at 1:27 pm

Very useful! I’ll definitely use this for my website. Thank you!

May 16, 2011 at 2:44 am

Thank you for the buttons, they are really cool. I have just one problem in that when I use the W3C CSS Level 3 Validator it brings up 56 errors and 1 warning, so can these be properly validated ?

Mikey C
May 23, 2011 at 2:05 pm

Thanks – these are great. Flipping IE9 gives a rounded border but doesn’t round the background colour to match. I’ve tried clipping the background but couldn’t get it to work. Anyone got a handy solution?

May 25, 2011 at 1:58 am

It’s a really good work !!

May 25, 2011 at 9:40 pm

This post is amazing helped me greatly.

Jeroen Corsius
Jun 8, 2011 at 1:10 pm

Thanks man!
Really clear and helpfull tutorial.

Jun 10, 2011 at 4:07 am

Love all the CSS3 stuff I learn on here.
I like the fact you show what they look like on non CSS3 browsers.
Then you can decide whether to go ahead or not…

Jun 10, 2011 at 7:51 am

Fabulous! Just what I was looking for. Thanks for sharing the love!

Jun 15, 2011 at 4:35 am

Is there will be any delay if i use these gradient styles. I mean whether the browser will take bit more time to render the styles? Because i like it and need to use it . Thats why am asking this?

Finally i like your site for the clean and simple design…

Sekar VK

Jun 15, 2011 at 11:46 am

Are you “slow banning” IE6 the same site at the same time works great on Firefox but IE6 is keeps spinning the loading icon. If so, its not cool at all. You post some coll web design examples and want to view them in older browsers.

Jun 16, 2011 at 5:21 am

Fabulous! Just what I was looking for.. very neatly explained… Great Work!!

Jun 20, 2011 at 10:43 am

Great post, helped me a lot. However, it doesn’t work well in IE9. The gradient CSS command is creating square colored corners…

Mads Collin
Jun 24, 2011 at 5:30 am

Best CSS3 Button tutorial ever! Thx for this!

Jun 25, 2011 at 9:04 am

This is awesome! Thanks so much :)

Jun 25, 2011 at 11:24 am

Totally cool!! thanks a bunch

Jun 27, 2011 at 5:03 am

you are amaizing i am njust a student for webmaster and graphic designer in the print….. and you help me so very much(sorry for the eanglish i am from israel)
just had to say it:)

Jun 28, 2011 at 4:09 am

Oh yeah !!!!

Thanks for the code. Great job !

Jul 5, 2011 at 12:15 pm

These are the best, simplest buttons yet!


Jul 8, 2011 at 3:34 am

Information is helpful to learn a lot.

Samuel Menezes
Jul 8, 2011 at 10:02 pm

Really nice!
It’s helping me a lot =)

Valentin B
Jul 10, 2011 at 2:25 pm

An another CSS3 Buttons Framework :

Raman Sharma
Jul 11, 2011 at 1:39 am

Hi thanks for sharing this.. but there is a problem with radius in IE 9. gradient is visible outside radius. Any solution for that?

Jul 11, 2011 at 11:13 am

I’ve the same problem … gradient is visible outside rounded corner

Jul 14, 2011 at 7:54 am

If you move the final border-radius css rule to the bottom of .button then it works in IE9 as well. Guess it’s just the order in which they appear screws up IE…

Jul 17, 2011 at 4:22 pm

This didnt work for me any 1 know why?
here is the url

Jul 18, 2011 at 12:59 am

working now

Jul 17, 2011 at 4:23 pm

sorry for double post but im using firefox latest version

Jul 17, 2011 at 7:55 pm

no thing

Jul 19, 2011 at 1:24 am

Awesome stuff thank you (-:

Jul 23, 2011 at 7:31 am

Thanks a lot, real kool stuff

Jul 27, 2011 at 11:44 pm

CORRECTION (it took my anchor tag and thought I was making a link): Love the buttons, BUT – when using a “button” tag the buttons become taller than with an “a” anchor tag. This problem even shows on the demo page. (FYI: I am using Firefox 5 but have had this problem since Firefox 3.6). Do you know how to fix this as it can be really off-putting when the two are right next to each other (one as a link, the other as part of a form)? Other than this small problem, these buttons are so cool and slick!

Jul 30, 2011 at 8:43 am

Hi all,

Love the buttons, but as stated unfortunately IE9 is played up. For anyone who’s interested, I added this in the .button class to remove the corners for IE – at least you don’t end up with dodgy corners.

border-radius: .5em;

Jul 30, 2011 at 8:45 am

Urgh, that didn’t format right.

Replace # with !.

border-radius: .5em;<#–

Jul 30, 2011 at 8:47 am

LOL, that doesn’t output either!

Last attempt, otherwise just delete the comments.

Reaplce LB with and # with !.

LB#–[if #IE]RBLB#–RBborder-radius: .5em;LB#–LB#[endif]–RB

Aug 23, 2011 at 11:10 am

And then he handed you the thirty-five 45

Sep 20, 2011 at 4:04 am

nice sense of humor :)

Ryan Wheale
Sep 26, 2011 at 9:22 pm

See my comment below for a quick and [ridiculously] easy fix for IE9.

Jul 30, 2011 at 8:48 am

Screw it, just use the if !IE syntax in CSS and remove the border-radius in the .button class.

Jul 31, 2011 at 9:45 pm

Thx. The information is very interesting. Can be used practically.

Shawn Peters
Aug 1, 2011 at 2:19 pm

Hey there! I know you posted this over a year ago, but wow wow wow! I have been trying to update the various “button” type elements on our website and the amount of CSS I used was atrocious. Not to mention in Internet Exploder it looked like just a text link with space around it. Thank you for this post!

Oh, and I’m thoroughly impressed. At least two (2) posts on each page of your blog has something I can use. You rock!

Aug 10, 2011 at 9:42 am

Nice post. It’s really help me.
Thx :D

Fahid Pervaiz
Aug 11, 2011 at 5:18 am

Hello really Good Work am get & unique idea Your Best Tutorials Thx and GOD BLESS YOU Get Complete Tutorials
on my website SEO Tips & web design Tips in Photoshop

Aug 17, 2011 at 2:45 pm

Hey Now;

Great post on CSS3 button styles.

Thx 4 the info;

Aug 23, 2011 at 11:30 am

thanks much, I’ve been scouring the web for three days and had a few usable but clumsy solutions. This is great stuff, gonna make me look like I know what I am doing. Too many tutorials show things that don’t work that well or that you need to spend a lot of time refining. This works great right out of the box. thanks!

Aug 23, 2011 at 1:06 pm

I’m doing some buttons and wanted them to have a gradient background, and found your post really useful so thanks

xbox 360
Aug 25, 2011 at 10:14 pm

As for good programming.

Sep 5, 2011 at 8:06 am

Awesome man… good job

Sep 8, 2011 at 6:55 am

You can support even more browsers if you add their vendor-specific gradients:

background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -webkit-linear-gradient(top, #444, #000);
background: -moz-linear-gradient(top, #444, #000);
background: -ms-linear-gradient(top, #444, #000);
background: -o-linear-gradient(top, #444, #000);
background: linear-gradient(top, #444, #000);

Sep 8, 2011 at 6:58 am

Also do NOT use RGBA() with text-shadow – unless you want your elements to look hideous in Chrome… just use a hex code for text-shadow instead.

muhammad ali farooq
Sep 26, 2011 at 9:05 am

i got to you blog a project late, but still best thing i have see, just copy and past stuff no need to do any thing with out images. thanks a lot for sharing

Ryan Wheale
Sep 26, 2011 at 9:19 pm

IMPORTANT: I just made this discovery last week, but if you put a space (yes, a space) AFTER “progid:” you will get beautiful buttons in IE9 as well!!!

filter: progid: DXImageTransform[…]


Oct 13, 2011 at 2:53 pm

Unfortunately your just voiding the gradient and it’s falling back to the solid color… so your still not getting both border radius and background gradient.

Ryan Wheale
Jan 17, 2012 at 1:01 pm

I definitely misspoke in this comment – my apologies to everyone in this thread – I should have come back and corrected myself once I discovered my error. You cannot use rounded corners and background gradients in IE9. You can sometimes use an inset shadow to achieve a similar effect.

Sep 29, 2011 at 2:53 am

It’s cool man :)

Oct 1, 2011 at 7:35 am

How to increase the size of buttons?

Oct 3, 2011 at 11:39 am

Thanks I always find this website helpful, whenever I get stuck in designing process.

Oct 3, 2011 at 11:50 am

i liked all the buttons here they look so nice and clean. thanx

Oct 10, 2011 at 4:14 pm

@Ryan Wheale – Great find. IE9 works perfectly now.

Ryan Wheale
Jan 17, 2012 at 12:56 pm

Unfortunately, it appears to work on small buttons, but you will notice that the entire gradient gets defeated. Try doing it on a large DIV… you will see that there is no gradient at all.

The rule of thumb I now live by is to not use filter: progid:… with rounded corners… ever. Sometimes I will use an inset shadow to give the effect I am after.

So sad that IE9 supports background gradients and rounded corners… but not both :(

Siddhesh Satoskar
Oct 13, 2011 at 5:53 am


Anyhow it is not working on IE9 as IE9 does not support gradient effect and border-radius properties at the same time!
I am working on this issue. I will get back to you if I found something.


Oct 19, 2011 at 7:14 am

Hi Siddhesh,

Do you have a solution for IE9?


Oct 19, 2011 at 7:58 am

The solution was alreadey in the comments:

IMPORTANT: I just made this discovery last week, but if you put a space (yes, a space) AFTER “progid:” you will get beautiful buttons in IE9 as well!!!

filter: progid: DXImageTransform[…]


Jan 31, 2012 at 1:40 am

What a dumbo Jeroen is! LOL

Oct 17, 2011 at 1:31 pm

awesome.. Thank for the tutorial.

Oct 20, 2011 at 10:27 am

Hi, thanks for the code.

Just created a plugin for wordpress to add your css buttons to wordpress websites. Need your mail to send you the zip file.


Oct 21, 2011 at 1:38 am

Nice and good

Oct 21, 2011 at 1:42 am

For the color part I added the W3C-Version (linear-gradient), Opera-, MS-, and webkit-gradient-browser-prefixes using the “Ultimate CSS Gradient Generator”:

Oct 26, 2011 at 12:28 am

thank you again. your example is very easy and so beatiful.

Oct 26, 2011 at 5:38 pm

These are awesome! Thanks!

Oct 28, 2011 at 9:14 am

Thanks for this information! At the same time I searched for this, I also came across CSS Pie ( which addresses the extra features for Internet Explorer. I think I will try your solution first though, because I like understanding what goes on underneath. (And thanks for the people in the comments for pointing out the IE9 fix).

référencement grenoble
Dec 19, 2011 at 11:52 am

thanks for the tip, I was looking for it since far !

svenska säkerhetsdörrar
Dec 20, 2011 at 3:18 pm

Exactly what I was looking for! Thanks!

Dec 22, 2011 at 10:10 am

Hi, I know you answered some questions about the IE problem, but I still cannot get this to work on IE. I am quite a newbie about CSS, so if you excuse my maybe silly question: I added the space like this: filter:progid: DXImageTransform.Microsoft.gradient(startColorstr=’#ed1c24′, endColorstr=’#aa1317′);

But IE still doesn;t show the color of the button, it’s just rectangular and white

Dec 31, 2011 at 9:50 am

Very well done, going into my web-tools bookmark folder for sure. Thanks.

Jan 13, 2012 at 6:02 pm

Great Stuff! Thanks so much as I was having problems with CSS3 buttons in IE8, but this fixed it. However, I did have a question as I’m a newbie to all this stuff. I have a lightbox that pops out once a button is clicked. Here’s the code using my previous button: Button

I can’t get the lightbox to work with this button’s code because it uses the “class=” as well. Is there a work around or simple line of code that I’m missing? Any help would be appreciated!

Jan 13, 2012 at 6:08 pm

as I said, I’m a newbie and put complete code into the post, but I’ll give it one more shot:
a target=”_blank” href=”[iframe]=true&lightbox[width]=770&lightbox[height]=760″ class=”lightbox”>Online Connection Card</a

spring valley vitamins
Jan 20, 2012 at 4:50 am

definitely, a BIG BIG deals.thx, for article

Jan 20, 2012 at 12:19 pm

Hi! i’m using thesis theme and i don’t know where to put the code you gave is it for custom.css? please reply!

Venkat Dinavahi
Jan 24, 2012 at 4:33 pm

Hi Nick,

Love the buttons! I have a question: given a base color, how do you get the rest of the colors (border-color, gradient colors, etc)? Are the rest of the colors the base color with the brightness changed?


Jan 27, 2012 at 5:52 am

these are really good by Anas Ali
web designer at

Creations web designing company in delhi India

Kadiva Anas
Feb 1, 2012 at 2:23 am

I am Software developer.

Krish Freelance Web Designer Malaysia
Feb 7, 2012 at 8:54 am

freelance web designer and developer from Malaysia | cheap Web Designing.Offers bunch of creative services – custom web design (layout, applications, CMS, CSS), e-commerce, graphic design, creative copywriting, corporate identity, logo design,interactive marketing and more…

Feb 16, 2012 at 2:22 pm

I have a question i have the code but when i put it into my css how do i name it so i can link it to a div in html.
Like normally i would do for example in my css — “#navagation { (and then the code);}”
and i would link it to my html code like for example–” “

Feb 16, 2012 at 2:23 pm

I Really like this code! :) but
I have a question i have the code but when i put it into my css how do i name it so i can link it to a div in html.
Like normally i would do for example in my css — “#navagation { (and then the code);}”
and i would link it to my html code like for example–” “

Feb 18, 2012 at 6:43 pm

Thanks people for this helpful tutorial.


Feb 20, 2012 at 7:47 am

good tutorials..god buttons.thanks.

Feb 21, 2012 at 2:26 pm

How can i rearrange the buttons so that the are vertical rather than horizontal.

thanks Amanda

Mar 9, 2012 at 2:35 am

hi , veryyyyyyyyyyyyyyyyyyyy goooooood site
I Love u

Mar 9, 2012 at 5:37 am

woooww… thats realy cooooll! thx

Mar 14, 2012 at 6:09 am

Hey, this is probably the best CSS3 button tutorial I’ve seen in a while. Good work!

Mar 25, 2012 at 10:13 am

Thanks – works, nicely designed tutorial. I respekt the work. Just great!

Mar 31, 2012 at 4:52 pm

Very nice buttons, although in IE9 the gradient goes right up to the corners yet there is a rounded border radius inside of that which looks a little untidy…. i’m trying to fix it, any ideas ?

Jun 15, 2012 at 4:43 am

Me too, looks ok with the colours I’m using but would be ideal to get them rounded!

Apr 5, 2012 at 1:30 pm

Wonderful, thank you. Looks great in Firefox, in Chrome and IE, don’t care about gradient or corners, just have to get the text fitting in the “Add to Cart” buttons, don’t know how that got so wonky.
Working on site here –

Apr 8, 2012 at 4:13 pm

Hi Tammy
Just been to your site to see your buttons and was impressed :-)
How do you get that lovely central bit that separates from the background?
I’d love to do that to some of my pages [just learning web design]
Many thanks

Helen Neely
Apr 11, 2012 at 6:07 am

Nice example on creating a very catchy CSS 3 button. I was working on a project and needed something cool to make it stand out and your examples here have definitely saved the day.

Great job.

Apr 18, 2012 at 1:44 pm

A very good tutorial. Another thing to note, if anyone is interested, is that you can add multiple box-shadow’s. You can use the inset feature to give a good internal shadow, or give your buttons a bevel effect. Something like this:
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.2),inset 1px 1px 1px rgba(255,255,255,.3);

And regarding the IE gradient, it overlaps the border radius. So definitely impractical to use on elements with rounded borders. Maybe there’s a fix somwhere :D

Malcolm Adams
Apr 21, 2012 at 12:34 pm

Hi, Can I use this code to use as an input button for a form?
If so, How would I add this to the code below.


Robert Heuser
Apr 25, 2012 at 2:11 pm

Excellent tutorial! Thanks a bunch! I am going to be using these buttons in my company’s website!

Apr 26, 2012 at 8:32 pm

Good tutorial!
thank you. 고마워요~

Weenie The Poo
Apr 29, 2012 at 8:55 am

is there a way to embed a picture inside the button instead of text?

Farzin Seyfollahi
May 3, 2012 at 12:47 am

Nice. thank you.

Thiago Paes
May 12, 2012 at 5:16 pm

nice! very useful, thanks

May 22, 2012 at 7:26 am

Thanks a lot for your CSS buttons!

Jun 12, 2012 at 2:05 am

Thank you very much for your teaching material, is very useful to me really appreciate it

Jun 27, 2012 at 3:21 am

Thank you very much for the awesome tutorial!

Jul 4, 2012 at 10:45 pm

Thank you very much, easily one of the best tutorials on CSS buttons out there!

Jul 6, 2012 at 11:05 am

Great tutorial mate. With great respect.

Craig Smith
Jul 12, 2012 at 7:27 pm

Lots of code for something so simple. I still think images are faster than writing all that code. Hopefully they will make the css easier to write in the future.

Michael Cabus
Sep 24, 2012 at 3:55 pm

Um…no, they are not faster…and, not a lot of code…why use an image when you can use CSS3?

Cameron Tinker
Jul 12, 2012 at 11:51 pm

Do you have any fix for rounded corners and gradient filter edges bleeding in IE9? I’ve tried adding a containing element and setting the overflow to hidden, but it doesn’t correctly apply a mask to the buttons.

Sep 10, 2012 at 3:55 am

I’ve got the same problem, do you have any fix ?

Jul 13, 2012 at 9:01 am

Nice work! Thanks dude!

Jul 15, 2012 at 11:08 pm

Wow!!! Great Css, i was looking for it. I will use it in my current website.


Jul 24, 2012 at 2:13 am


Yates de lujo en Ibiza
Aug 1, 2012 at 3:07 am

I’m taking a web course this semester and would LOVE to go to this conference to learn more. I’m totally inspired by Sarah Parmenter’s website and I really would appreciate going to hear her talk

Aug 3, 2012 at 4:52 pm

this is just perfect! I’m using it now in my website! thanks!

Aug 6, 2012 at 5:38 pm

Brilliant, thanks for taking the time and effort to write your blog and explanations. I will sort this on my site tomorrow. Nice one.

Prashast Kumar Rajput
Aug 8, 2012 at 10:49 pm

Awesome tutorial man….I really appreciate your work….:)

Aug 19, 2012 at 11:39 am

Thanks. I’m looking for CSS buttons that draw with a glass look to them. Any suggestions?

Aug 20, 2012 at 5:26 pm

Wow!!! Great Css, i was looking for it. I will use it in my current website.

William@Social Media Strategy Plan
Aug 23, 2012 at 7:40 am

IE 9 fix change border radius width to 8px rather than 0.5em

Sep 10, 2012 at 4:22 am

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

Like that ? It does’nt work…

Aug 29, 2012 at 12:11 pm

Really a best website for the web designers. I am really interested to create css button..So i will learn it

Sep 5, 2012 at 3:54 am

send some easy code

Abolfazl Beigi
Sep 11, 2012 at 3:36 am

dude it’s very easy. just try some more.

Abolfazl Beigi
Sep 11, 2012 at 3:35 am

Thanks, very useful.

Sep 13, 2012 at 7:45 am

Thanks for your help, trying hard, here is a yellow code for people to try out:

/* Yellow */
.yellow {
color: #010101;
border: solid 1px #E7EE61;
background: #F1FD03;
background: -webkit-gradient(linear, left top, left bottom, from(#D2D20F), to(#EFF372));
background: -moz-linear-gradient(top, #D2D20F, #EFF372);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#D2D20F’, endColorstr=’#EFF372′);
.yellow:hover {
background: #D1DA1A;
background: -webkit-gradient(linear, left top, left bottom, from(#F6F5AC), to(#D2CB33));
background: -moz-linear-gradient(top, #F6F5AC, #D2CB33);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#F6F5AC’, endColorstr=’#D2CB33′);
.yellow:active {
color: #EFF75E;
background: -webkit-gradient(linear, left top, left bottom, from(#EFF372), to(#FFFFB3));
background: -moz-linear-gradient(top, #EFF372, #FFFFB3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EFF372′, endColorstr=’#FFFFB3′);


Sep 17, 2012 at 9:52 pm

Thanks for this help.

Sep 18, 2012 at 8:48 am

Thanks this is very useful for me…

Sep 28, 2012 at 10:53 am

Great code. Thanks for sharing this.

Oct 1, 2012 at 11:48 pm

Superb, already using it :)

Oct 2, 2012 at 4:55 am

Beautiful! Thanks!
Only one different button color in my ul/li does not work, how do i solve that…

Oct 4, 2012 at 10:22 am

Thank you sir! elegant, simple, and very usefull!

Peter Drinnan
Oct 11, 2012 at 9:24 am

Oh man this is a lifesaver. Thanks!

Oct 21, 2012 at 12:18 pm

My problem ist, that I have a standard a:link with dark blue color definition that I want to override within these buttons, but it does not work. I would like to have white or yellow as link color in .blue, but until now nothing seemed to work and I got some strange results. Could you change the code so that color codes that are given in .color override the set general link color?


Nov 19, 2012 at 10:50 am

it does not look the same in IE (6.0+) , round corners are lost and there is no gradient color as it may appear in Chrome and Firefox … !!!

akash kumar
Jan 30, 2013 at 11:58 pm

thanks really helpful..

Dec 9, 2016 at 9:07 am

it’s so cool!

Post Comment or Questions

Your email address will not be published. Required fields are marked *