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

Preview

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

preview

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.

applying

398 Comments

Martijn
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 http://www.martijndevalk.nl/tuts/fancy_buttons/

Jan
Apr 22, 2010 at 6:22 am

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

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

Stephan
Apr 22, 2010 at 6:32 am

Sehr gut – bitte so weitermachen :-)

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

Kaelig
Apr 22, 2010 at 7:01 am

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

Beside that, this technique is perfect :)

Aisha
Apr 22, 2010 at 7:16 am

Beautiful Site, I really like it.

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

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

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

marleyx
Apr 22, 2010 at 9:18 am

very nice and helpfully for a no -pictured website

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

Alex
Apr 22, 2010 at 9:23 am

Nice tutorial.

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

Heather
Apr 22, 2010 at 9:46 am

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

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

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

Kihwa
Apr 22, 2010 at 1:38 pm

Very helpful! Thank you!

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

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

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

Dave
Apr 22, 2010 at 11:46 pm

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

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

Shane
Apr 23, 2010 at 12:54 am

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

illimar
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 http://wpsupertheme.com/superbuttons-stylish-buttons-for-your-website/

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

hillary
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. :)

Jay
Apr 23, 2010 at 1:37 pm

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

wew
Apr 24, 2010 at 3:14 am

nice buttons

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

Mamdouh

seo-julie
Apr 24, 2010 at 12:43 pm

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

BORA
Apr 24, 2010 at 2:09 pm

Simple and neat!
Thanks for putting together!

webdesignfm
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 LKillustration.com
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

Aaron
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 + ie-css3.htc and you’ve got complete coverage!
This is great!
Thanks!

kgordon
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

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

wien
Apr 27, 2010 at 7:26 am

great work, thanks for sharing

Matej
Apr 27, 2010 at 10:29 am

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

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

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

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

nazpro
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
@bigclickstudios

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.

Iflexion
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

AWESOME!!! THANK YOU

Alias M2K
Apr 29, 2010 at 1:42 am

Great job man!!! :)

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

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

Gustavo
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…

Pieter

Dat Tai
May 1, 2010 at 7:27 pm

Great toturial

Thanks alot

cromano
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”.
Like:
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

woniu
May 1, 2010 at 10:55 pm

oh~~i love it .strong.

Dennis
May 2, 2010 at 4:00 pm

wow loving these buttons :) thanks

Master
May 3, 2010 at 2:08 am

Great job…
another site having top page rank professional HTML/CSS tutorials
see link below
http://www.tutorials99.com

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

mgswarlay
May 3, 2010 at 6:37 am

very thankyou :)

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

Mr.nian
May 4, 2010 at 7:48 pm

Hello,I’m from china .

Constantinos
May 5, 2010 at 11:01 am

Worked like a charm! Thanks so much.

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

Mike
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! (:

Ann
May 7, 2010 at 3:53 pm

very good tut. thanks.

Kees
May 8, 2010 at 3:48 pm

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

Thanks
Kees.

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

mo
May 10, 2010 at 11:26 pm

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

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

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

Chao.

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.

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

Pablo
May 21, 2010 at 3:43 pm

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

arif
May 23, 2010 at 11:07 pm

Thanks For all f you

ali
May 25, 2010 at 9:23 am

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

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

Jan
May 26, 2010 at 4:19 am

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

Kevin
May 27, 2010 at 9:49 am

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

Joseph
May 27, 2010 at 11:33 am

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

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

Vladimir
May 28, 2010 at 3:17 pm

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

Antonella
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 :-)
Cheers

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

wantfee
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, http://css3menu.com/. It can create similar CSS3 buttons, w/o coding. Versions for Mac and Windows are available.
Thanks!

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

chai
Jun 15, 2010 at 4:01 am

nice tutor…

Panda
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

Bye
Oliver

Daniel
Jun 21, 2010 at 6:45 pm

Great tutorial. will try it out :)

Hank
Jun 23, 2010 at 9:53 pm

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

zakki
Jun 26, 2010 at 5:08 am

thats great art. great job dude

yulianti
Jun 26, 2010 at 11:50 pm

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

arieff
Jun 27, 2010 at 1:15 am

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

utari
Jun 27, 2010 at 8:09 am

thanks for the tutorial about css..it’s so helpful to me

VIRGI
Jun 30, 2010 at 3:29 pm

Nice tutorial ^0^

eco
Jul 6, 2010 at 8:02 am

great tutorial, thanks..

Progs4u
Jul 6, 2010 at 10:57 pm

Thank you so much ..
You are very cool

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

eric
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

yohan
Jul 13, 2010 at 10:07 pm

nice info, thanks for sharing :)

stblank
Jul 14, 2010 at 11:25 pm

Thanks for sharing this. Awesome!

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

Kojeje
Jul 16, 2010 at 12:18 am

I love the orange button :)
Thanks…

ilham
Jul 17, 2010 at 11:48 pm

this tutorial very clear, thanks

wij
Jul 18, 2010 at 11:01 pm

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

dety
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

kai
Jul 19, 2010 at 8:21 pm

very good and creative….

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

Cybernoxa
Jul 24, 2010 at 12:14 am

And I thought I was so briliant building that: http://www.cybernoxa.pl/projects/css3/buttons/ Today I found yours and… the code is almost the same, anyway – gr8 article :)

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

dreiden
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

http://www.freelanceportal.8rf.org

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.

http://www.freelanceportal.vze.com

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

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

hari
Aug 11, 2010 at 7:35 am

very useful, and also very nice

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

Craig
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 –
http://jehiah.cz/archive/button-width-in-ie

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

Dido
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.
http://funnotfun.com
Any idea how to correct that ?
Thanks

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.

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

Reda
Sep 16, 2010 at 4:21 pm

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

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

http://jehiah.cz/a/button-width-in-ie

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

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

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

Reda
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 */
button::-moz-focus-inner,
input[type=”reset”]::-moz-focus-inner,
input[type=”button”]::-moz-focus-inner,
input[type=”submit”]::-moz-focus-inner,
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 !

newToCss
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…

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

Reda
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

Reda
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”

Reda
Oct 17, 2010 at 6:20 pm

here is a screen of the buttons in FF:
http://www.moroccan-arts.co.uk/screen-buttons-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);
}

Reda
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: http://www.moroccan-arts.co.uk/screen-buttons-FF1.png
and here is the page http://www.moroccan-arts.co.uk/test-btn.php
Thanks once again

Reda
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 ;)

GFP63
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:

http://tinyurl.com/2aabwrp

Thanks in advance.

GFP63
Nov 8, 2010 at 6:09 am

Nevermind. Got it. :/

http://tinyurl.com/2aabwrp

Still going to use your gradient buttons though…

B
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… :-(

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

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

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

Lucas
Dec 27, 2010 at 6:41 pm

Thank you so much for this amazing content!!

Michael
Jan 3, 2011 at 3:49 am

Awesome buttons!
Thanks for sharing!

Tony
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!
:o)

MiST
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

josephpaulino
Jan 13, 2011 at 3:16 am

Thanks for this great work! Thinking about using it.

syman
Jan 14, 2011 at 6:10 am

bbbbb

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!

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

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

Cluehunt
Jan 29, 2011 at 11:35 am

Preview

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!

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

Laura
Jan 31, 2011 at 10:36 am

This is wonderful – thank you!

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

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

BytesLand
Feb 8, 2011 at 3:26 am

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

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

york
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

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

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

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

Riccardo
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 :(

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

Casey
Mar 29, 2011 at 9:54 am

Sean – do you have this code somewhere? Thanks!

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

sumomax
Mar 21, 2011 at 5:51 pm

is not easy to put on weight

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

Pablinho
Mar 28, 2011 at 1:51 pm

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

Tsiry
Apr 7, 2011 at 2:50 am

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

Dario
Apr 8, 2011 at 4:14 pm

Excellent!

Oleg
Apr 12, 2011 at 4:50 am

THANK YOU! Good POST!!

Farzin
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/

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

hostgator
Apr 25, 2011 at 8:42 am

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

George
Apr 30, 2011 at 9:04 am

Great tutorial…

Brent
Apr 30, 2011 at 1:21 pm

Simply fantastic! Thank you !!!

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

richardg29
May 4, 2011 at 11:11 am

Nice work.
This is truly useful.

Gave you credits on my blog post – http://richarrdg.tumblr.com

Thanks.

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

James
May 16, 2011 at 2:44 am

Hi,
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 ?
Thanks

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?

superclub888
May 25, 2011 at 1:58 am

It’s a really good work !!

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

Matt
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…

Karen
Jun 10, 2011 at 7:51 am

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

Sekar
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…

Thanks,
Sekar VK

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

Garuda
Jun 16, 2011 at 5:21 am

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

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

Rebekah
Jun 25, 2011 at 9:04 am

This is awesome! Thanks so much :)

Jen
Jun 25, 2011 at 11:24 am

Totally cool!! thanks a bunch

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

alienlebarge
Jun 28, 2011 at 4:09 am

Oh yeah !!!!

Thanks for the code. Great job !

Andrew
Jul 5, 2011 at 12:15 pm

These are the best, simplest buttons yet!

Great!

SEO
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 =)
Thanks!

Valentin B
Jul 10, 2011 at 2:25 pm

An another CSS3 Buttons Framework :
http://www.geekeries.fr/buttons/

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?

markus
Jul 11, 2011 at 11:13 am

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

Adam
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…

Sonny
Jul 17, 2011 at 4:22 pm

This didnt work for me any 1 know why?
here is the url
http://neoncms.co.cc/index.html

Sonny
Jul 18, 2011 at 12:59 am

working now

Sonny
Jul 17, 2011 at 4:23 pm

sorry for double post but im using firefox latest version

eslam
Jul 17, 2011 at 7:55 pm

no thing

Jamii
Jul 19, 2011 at 1:24 am

Awesome stuff thank you (-:

alby
Jul 23, 2011 at 7:31 am

Thanks a lot, real kool stuff

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

Ricky
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;
<!–

Ricky
Jul 30, 2011 at 8:45 am

Urgh, that didn’t format right.

Replace # with !.

border-radius: .5em;<#–

Ricky
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

complex41
Aug 23, 2011 at 11:10 am

And then he handed you the thirty-five 45

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

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

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

Ozylog
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

Catto
Aug 17, 2011 at 2:45 pm

Hey Now;

Great post on CSS3 button styles.

Thx 4 the info;
Catto

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

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

Athi
Sep 5, 2011 at 8:06 am

Awesome man… good job

Ben
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);

Ben
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[…]

Cheers

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

TJ
Sep 29, 2011 at 2:53 am

It’s cool man :)

XXX
Oct 1, 2011 at 7:35 am

How to increase the size of buttons?

Dheeraj
Oct 3, 2011 at 11:39 am

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

opencart
Oct 3, 2011 at 11:50 am

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

Leo
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

Hi,

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.

regards,
Siddhesh

Jeroen
Oct 19, 2011 at 7:14 am

Hi Siddhesh,

Do you have a solution for IE9?

Greetz,
Jeroen

Jeroen
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[…]

Cheers

fatriff
Jan 31, 2012 at 1:40 am

What a dumbo Jeroen is! LOL

sonusmac
Oct 17, 2011 at 1:31 pm

awesome.. Thank for the tutorial.

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

cheers,
serge

Stefan
Oct 21, 2011 at 1:38 am

Nice and good

Stefan
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”: http://www.colorzilla.com/gradient-editor/

sarcina
Oct 26, 2011 at 12:28 am

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

Stik
Oct 26, 2011 at 5:38 pm

These are awesome! Thanks!

Martin
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 (http://css3pie.com/) 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!

Stiv
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

Erik
Dec 31, 2011 at 9:50 am

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

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

Ed
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=”https://clc.ccbchurch.com/w_form_response.php?form_id=24&tab=nw&lightbox[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

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

-Venkat

Anas
Jan 27, 2012 at 5:52 am

these are really good by Anas Ali
web designer at
Ahead

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…

Amanda
Feb 16, 2012 at 2:22 pm

Hi,
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–” “

Amanda
Feb 16, 2012 at 2:23 pm

Hi,
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–” “

Nathan
Feb 18, 2012 at 6:43 pm

Hello,
Thanks people for this helpful tutorial.

++++

cudjex
Feb 20, 2012 at 7:47 am

good tutorials..god buttons.thanks.

Amanda
Feb 21, 2012 at 2:26 pm

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

thanks Amanda

maziar
Mar 9, 2012 at 2:35 am

hi , veryyyyyyyyyyyyyyyyyyyy goooooood site
I Love u

Nico
Mar 9, 2012 at 5:37 am

woooww… thats realy cooooll! thx

Brian
Mar 14, 2012 at 6:09 am

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

Andreas
Mar 25, 2012 at 10:13 am

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

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

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

Tammy
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 – http://spottedsheepyarnshoppe.com/zencart

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

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

Thanks

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!

so-yeun
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

Przemek
May 22, 2012 at 7:26 am

Thanks a lot for your CSS buttons!

berly
Jun 12, 2012 at 2:05 am

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

Gary
Jun 27, 2012 at 3:21 am

Thank you very much for the awesome tutorial!

Rob
Jul 4, 2012 at 10:45 pm

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

Aby
Jul 6, 2012 at 11:05 am

Great tutorial mate. With great respect.
@by

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.

Remi
Sep 10, 2012 at 3:55 am

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

erik
Jul 13, 2012 at 9:01 am

Nice work! Thanks dude!

Nitin
Jul 15, 2012 at 11:08 pm

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

thanks.

MelvinG
Jul 24, 2012 at 2:13 am

GREAT!!

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

Finch
Aug 3, 2012 at 4:52 pm

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

Vince
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….:)

Art
Aug 19, 2012 at 11:39 am

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

seo
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

Remi
Sep 10, 2012 at 4:22 am

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

Like that ? It does’nt work…

Robin
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

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

Joe
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′);
}

Regards

Theavuth
Sep 17, 2012 at 9:52 pm

Thanks for this help.

Rajesh
Sep 18, 2012 at 8:48 am

Thanks this is very useful for me…

Preetam
Sep 28, 2012 at 10:53 am

Great code. Thanks for sharing this.

Supreme
Oct 1, 2012 at 11:48 pm

Superb, already using it :)

Mary
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…

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

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

Regards
Thomas

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

jing
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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.