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.
The image below shows how the button will display in different browsers.
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;
}
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');
}
Lets say you like the blue button and want to use it on your page:
<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.
Martijn
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
Wow, awesome buttons. I’ll use them instantly for some of my projects – thanks!
StellanD
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
What is the name of this handwriten typeface you use in your articles? I’d appreciate if you could tell me! Thx! ^^
Marco Barbosa
Quite simple, nothing new.
But it’s good to see another example of CSS3 usage !
Stephan
Sehr gut – bitte so weitermachen :-)
Christian
Yesterday I made a similar button with CSS3 gradients and and :active state, too, but you hit it! Very cool stuff!
Kev Adamson
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
I guess you should add -ms-filter for IE8+
Beside that, this technique is perfect :)
Aisha
Beautiful Site, I really like it.
Elise
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
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
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
Wonderful tutorial, I am so impressed with the progressive enhancement features of CSS3
Adam C
I’m wondering…does adding the filter for IE eat up a lot of memory?
sarfraz raza
Good luck guys, really good work.
marleyx
very nice and helpfully for a no -pictured website
Rupert
I love them. It’s such a relief to see things done the way you know they should be. Thanks.
Alex
Nice tutorial.
You might be interested in another example on nice buttons witch CSS3.
Heather
This is great! Such a time saver. You’re amazing, thx for sharing!
Cook
a very well written article…..nice job
Guy At HockeyBias dot com
Gorgeous! Thank you!
Michael Hart
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
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
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
Very helpful! Thank you!
lava360blog
thats really cool and css3 is looking powerful and good enough to make the web more better. thanks for the share
Smashing Share
Very well explained. Thanks Nick La
Pam Griffith
You can add an inset box-shadow to the active state to really make it feel pressed.
Editha Fuentes
excelent! Thanks!!!!
Shane
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
wow great set of buttons thanks for this awesome tutorial
Danny Dyson
All I can say is, I love CSS3!
alistair
Thanks for the great css tips, & the amazingly clear explanations & diagrams. And especially for helping create more beauty on the web – functional & aesthetic!
Dave
This is pretty dang awesome. Makes buttons super easy to add/manage.
@loo2k
Very nice! But it can work well in internet explorer.
Brandon Cash
@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
awesome buttons using cSS3.
Thanks for sharing.
Shane
@Brandon – thanks for that! I wasn’t aware :)
illimar
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
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
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
What a great post! CSS3 is so neat. Thanks for this!
Calvin Tennant
This is very nice.
Nicolas Gallagher
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
Super cool CSS3 gradient buttons. :)
Jay
Good stuff.. I’m starting to think pretty soon we won’t need PS any more :)
wew
nice buttons
Mamdouh
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
Thanks for this, I’ll definitely try it out on my site!
BORA
Simple and neat!
Thanks for putting together!
webdesignfm
wow nice sharing btw which IE version supports it???
Metal Wall Art
Really cute! I’m planning in making my own website and this buttons is perfect! thanks a lot!
Laurie K of LKillustration.com
This is really cool, I’ll have to book mark it for the next time I’m working on web buttons.
Steve Buell
Great Stuff!
Should maybe add :focus along with :hover and :active
Aaron
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
This + ie-css3.htc and you’ve got complete coverage!
This is great!
Thanks!
kgordon
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
what a great idea. Im looking for some cool ideas to put on my website.
Web Design
Very cool, thanks for the great detailed examples.
Ralph Mrowietz
It works :-) Very nice solution. Tks a lot!
wien
great work, thanks for sharing
Matej
Great stuff!! Thanks for this cool article. CSS3 really rocks.
David
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
thx for sharing nick, its works :)
Frankerson P
I’m going to put this to use right now. Thanks for sharing!
Rosamunda
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
wow it’s grate topic i love it ^_^
Street Views
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
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
very nice effect. thanks for sharing the great one. a very good tutorial 2010.
Iflexion
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
AWESOME!!! THANK YOU
Alias M2K
Great job man!!! :)
TimHolmesDesign
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
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
Absolutely fantastic, thanks a lot for sharing.
devil triger
beautifully, thanks :P
Pieter Kubben
Great, this one will be bookmarked & used!
Btw: compliments for the wonderful website…
Pieter
Dat Tai
Great toturial
Thanks alot
cromano
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
oh~~i love it .strong.
Dennis
wow loving these buttons :) thanks
Master
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
Neat professional buttons! I’ll use them!
Approx. 20 line of CSS and it looks beautiful.
Thx for sharing.
ubuntu admin
mgswarlay
very thankyou :)
Fred
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
Hello,I’m from china .
Constantinos
Worked like a charm! Thanks so much.
Mikkel
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
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
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
mmmmm CS3
makes life easier!!
Antoine Guedes
So useful!
I will have a try, I must use it for my own portfolio.
Thx a lot! (:
Ann
very good tut. thanks.
Kees
I know you heard it often… but great work..
i’m using them now….
Thanks
Kees.
mo
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
Never mind. Just had to take out the text shadow code. Works in uppercase on chrome now.
sascha
are tutorial! thanks for sharing your knowledge.
best regards sascha
Viet Nam Software Outsourcing Services
Beauty button and great tutorial … thanks for sharing this tip ..
Web designer
I will most definitely use these in my next project!
Dreamer
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
wow…such a nice post.. it helps alot thankx.
Tim Read
Thanks for the tutorial. Great detail.
arif
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
Thank you!!! Thak you very much!! You are the Lord of the Webs!! ;-)
arif
Thanks For all f you
ali
Thank you!!! Thank you!!! Thank you!!! ….
Karl
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
What if you want an icon-image in a input-button ánd a gradient?
Impossible right?
Kevin
Anyone know how to disable the button changing sizes in ffox and IE?
Joseph
Great style, it would be great to have the source files.
thanks
Ally
thank you for this lovely post is there any way we can hack IE for rounded corners
Web Designer Evan Skuthorpe
This is cool, just learning the new ropes of CSS3 so love it.
Vladimir
Very good and interesting Article, but that sucks that Internet Explorer has problems with this button…
Antonella
Great job! I’ve just tried it and it looks wonderful (^_^)
Love your website! Using it as a reference :-)
Cheers
Arif
Love it, works great… Mozilla and Chrome it is perfectly fine just IE it is not perfect… but enough for use :)
wantfee
That’s beautiful. I’ll use this technique in my next design.
CSS3 Menu
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
Nice, but what is the proper CSS3 gradient property once it is all finally supported?
David Chambers
Don’t forget to include a hover state for keyboard junkies!
chai
nice tutor…
Panda
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
Very great!
Thanx a lot
Bye
Oliver
Daniel
Great tutorial. will try it out :)
Hank
Is the only way to actually submit a form with this technique to use javascript?
zakki
thats great art. great job dude
yulianti
it’s like u make a shadow.. :D cool….
arieff
Nice, but what is the proper CSS3 gradient property once it is all finally supported?
utari
thanks for the tutorial about css..it’s so helpful to me
VIRGI
Nice tutorial ^0^
eco
great tutorial, thanks..
Progs4u
Thank you so much ..
You are very cool
ardhan
like this tutorial, your lesson was so easy to understand :)
code pixelz media
very good. I like the way you present your content.
eric
i still confused with some part…
may be i must learn more…
:)
thanks, nice post
God Bless u
yohan
nice info, thanks for sharing :)
stblank
Thanks for sharing this. Awesome!
Amanda
@ 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
I love the orange button :)
Thanks…
ilham
this tutorial very clear, thanks
wij
yeah..that’s great design..
it’s very helpful, thanks for sharing..
dety
thanks for your info. easy to understanding
will ceare
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
very good and creative….
Backgrounds
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
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
thx for info, nice sharing
Shad Vick
Very handy. Thanks for sharing the code and how to please all browsers – even IE.
dreiden
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
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
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
Very cool and simple. Really appreciated the previews in noncc3 browsers.
hari
very useful, and also very nice
patrick
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
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
awesome, very handy to know!
Steve Piercy
@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
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
Really nice tutorial, thanks for sharing…
Andrew Braithwaite
Really useful tutorial, simple and easy to use. I found it really useful. Thanks.
Thiago
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
Thx for your brief advice. Liked it and keep CSS3 coming :D
Michael Molino
Brilliant little bit of code! Thanks so much!
Reda
thanks for sharing this code
but is there a fix to the height in firefox?
Thanks you
Stephen
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
Wow! Those buttons looks cool! Thanks for sharing that!
But… is that WC3 compliant? Is that a ‘valid’ code?
Laura Hogarth
This is a fantastic article – thanks! Going to start using these types of buttons right away :)
ospop shoes shop
Really useful tutorial, simple and easy to use. I found it really useful. Thanks.
ppshein
That’s great, dude. I love it and thanks for sharing.
Thomas Isaksson
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
Thankx dude it’s really cool , keep it up
Thomas Isaksson
I guess the alternative is to move the filter property to a IE8 only css with a conditional comment.
Reda
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
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
Thanks a lot for the useful info! The buttons look awesome. Cant wait to use them in our app
Sachin Pandey..
Itzz seems to be awesom…
Reda
hey Thomas, thanks for the tip to remove the useless outline in FF.
don’t you have a height issue with FF???
Kashyap Parel
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
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
@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
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
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
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
@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
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
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
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
Nevermind. Got it. :/
http://tinyurl.com/2aabwrp
Still going to use your gradient buttons though…
B
Has someone tried to get border radius in Internet Explorer? I’ve tried it with Curvycorners, but it doesn’t work… :-(
Ste
Has anyone actually, been able to get a different colour for the “clicked” button, ie visited ?
Gareth Rees
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
Why does this code come up as invalid css?
Heather Acton
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
I am currently using this technique on my website(in the nav) with some other effects.
ramit walia
what a nice tutorial… easy to understand! :D thanks for sharing your knowledge :D
Juno Mindoes
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
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
Thank you so much for this amazing content!!
Michael
Awesome buttons!
Thanks for sharing!
Tony
This works great in FF on my PC, but on my MAC, the Gradient does no apply? Am I missing something?
Tristian Jeff Mababa
Nice Work! Thanks
Jimi Dufraine
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
Damn, this really is nice! Used it in my project. Awesome!
Uçak Bileti
kabul et
Uçak Bileti
hayatmi denilir ulenn
josephpaulino
Thanks for this great work! Thinking about using it.
syman
bbbbb
Sam Rowell
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
I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!
david
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
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
Damn, this really is nice! Used it in my project. Awesome!
Anky
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
This is wonderful – thank you!
mashby
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
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
css3 like WordPress3.0 hit the unknown possibilities of their new. Thanx so much!!!
Laura
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
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
Good features! Css splash – Web design Inspiration gallery
Κατασκευη Ιστοσελιδων
Amazing!great examples. I am so glad that we can do nearly everything with css and reduce the amount of imgs. Thank you
Joachim
Great side – only looking this tut but think, all other tut’s great, too!
Thx for your engagement and
Greetings from Germany :-)
Joachim
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
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
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
Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(
Riccardo
Quite disappointed again with Microsoft. The new IE9 doesn’t support css3 gradients and text-shadows, which are my favourite codes :(
Sean T
I’ve added support for IE9 with these buttons via SVG + IE9 conditional style block.
Casey
Sean – do you have this code somewhere? Thanks!
BigAB
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
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
“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
is not easy to put on weight
Bart
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
Cheers, this is great!
Pablinho
Great tut, im wondering if the hover state is too heavy using the gradients, specially on IE ?
Tsiry
awesome, exactly what i was looking for. THANK YOU!
Dario
Excellent!
Oleg
THANK YOU! Good POST!!
Farzin
Really impressive post, we will consider adding these functionality to our online button maker tool .
Beben Koben
so cleary in explanation…thanks master \m/
Cherrie
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
Really nice work!
Was excited until I previewed it in IE9 on Win7 :(
Look flawless in Firefox 4 and Chrome 10 though :)
hostgator
very impressive tutorial , i liked this new css3 feature alot .. whoha
George
Great tutorial…
Brent
Simply fantastic! Thank you !!!
Chris
Awesome! Thank you for making this tutorial available. These css buttons are exactly what I am looking for. Cheers, Chris.
richardg29
Nice work.
This is truly useful.
Gave you credits on my blog post – http://richarrdg.tumblr.com
Thanks.
petesky
@Jacob V
Hi all, what about the problem in IE9 (all button corners seems to be not transparent) ???
Aalaap Ghag
These buttons are hot.
Kevin John Ventura
Very useful! I’ll definitely use this for my website. Thank you!
James
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
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
It’s a really good work !!
Ryan
This post is amazing helped me greatly.
Jeroen Corsius
Thanks man!
Really clear and helpfull tutorial.
Matt
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
Fabulous! Just what I was looking for. Thanks for sharing the love!
Sekar
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
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
Fabulous! Just what I was looking for.. very neatly explained… Great Work!!
tutipute
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
Best CSS3 Button tutorial ever! Thx for this!
Rebekah
This is awesome! Thanks so much :)
Jen
Totally cool!! thanks a bunch
liat
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
Oh yeah !!!!
Thanks for the code. Great job !
Andrew
These are the best, simplest buttons yet!
Great!
SEO
Information is helpful to learn a lot.
Samuel Menezes
Really nice!
It’s helping me a lot =)
Thanks!
Valentin B
An another CSS3 Buttons Framework :
http://www.geekeries.fr/buttons/
Raman Sharma
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
I’ve the same problem … gradient is visible outside rounded corner
Adam
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
This didnt work for me any 1 know why?
here is the url
http://neoncms.co.cc/index.html
Sonny
working now
Sonny
sorry for double post but im using firefox latest version
eslam
no thing
Jamii
Awesome stuff thank you (-:
alby
Thanks a lot, real kool stuff
Danny
Love the buttons, BUT – when using a button tag the buttons become taller than with an 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!
Danny
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
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
Urgh, that didn’t format right.
Replace # with !.
border-radius: .5em;<#–
Ricky
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
And then he handed you the thirty-five 45
Ray
nice sense of humor :)
Ryan Wheale
See my comment below for a quick and [ridiculously] easy fix for IE9.
Ricky
Screw it, just use the if !IE syntax in CSS and remove the border-radius in the .button class.
game
Thx. The information is very interesting. Can be used practically.
Shawn Peters
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
Nice post. It’s really help me.
Thx :D
Fahid Pervaiz
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
Hey Now;
Great post on CSS3 button styles.
Thx 4 the info;
Catto
DCD
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
I’m doing some buttons and wanted them to have a gradient background, and found your post really useful so thanks
xbox 360
As for good programming.
Athi
Awesome man… good job
Ben
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
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
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
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
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
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
It’s cool man :)
XXX
How to increase the size of buttons?
Dheeraj
Thanks I always find this website helpful, whenever I get stuck in designing process.
opencart
i liked all the buttons here they look so nice and clean. thanx
Leo
@Ryan Wheale – Great find. IE9 works perfectly now.
Ryan Wheale
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
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
Hi Siddhesh,
Do you have a solution for IE9?
Greetz,
Jeroen
Jeroen
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
What a dumbo Jeroen is! LOL
sonusmac
awesome.. Thank for the tutorial.
serge
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
Nice and good
Stefan
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
thank you again. your example is very easy and so beatiful.
Stik
These are awesome! Thanks!
Martin
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
thanks for the tip, I was looking for it since far !
svenska säkerhetsdörrar
Exactly what I was looking for! Thanks!
Stiv
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
Very well done, going into my web-tools bookmark folder for sure. Thanks.
Ed
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
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
definitely, a BIG BIG deals.thx, for article
Misskim
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
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
these are really good by Anas Ali
web designer at
Ahead
Creations web designing company in delhi India
Kadiva Anas
I am Software developer.
Krish Freelance Web Designer Malaysia
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
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
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
Hello,
Thanks people for this helpful tutorial.
++++
cudjex
good tutorials..god buttons.thanks.
Amanda
How can i rearrange the buttons so that the are vertical rather than horizontal.
thanks Amanda
maziar
hi , veryyyyyyyyyyyyyyyyyyyy goooooood site
I Love u
Nico
woooww… thats realy cooooll! thx
Brian
Hey, this is probably the best CSS3 button tutorial I’ve seen in a while. Good work!
Andreas
Thanks – works, nicely designed tutorial. I respekt the work. Just great!
Vicksta
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
Me too, looks ok with the colours I’m using but would be ideal to get them rounded!
Tammy
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
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
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
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
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
Excellent tutorial! Thanks a bunch! I am going to be using these buttons in my company’s website!
so-yeun
Good tutorial!
thank you. 고마워요~
Weenie The Poo
is there a way to embed a picture inside the button instead of text?
Farzin Seyfollahi
Nice. thank you.
Thiago Paes
nice! very useful, thanks
Przemek
Thanks a lot for your CSS buttons!
berly
Thank you very much for your teaching material, is very useful to me really appreciate it
Gary
Thank you very much for the awesome tutorial!
Rob
Thank you very much, easily one of the best tutorials on CSS buttons out there!
Aby
Great tutorial mate. With great respect.
@by
Craig Smith
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
Um…no, they are not faster…and, not a lot of code…why use an image when you can use CSS3?
Cameron Tinker
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
I’ve got the same problem, do you have any fix ?
erik
Nice work! Thanks dude!
Nitin
Wow!!! Great Css, i was looking for it. I will use it in my current website.
thanks.
MelvinG
GREAT!!
Yates de lujo en Ibiza
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
this is just perfect! I’m using it now in my website! thanks!
Vince
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
Awesome tutorial man….I really appreciate your work….:)
Art
Thanks. I’m looking for CSS buttons that draw with a glass look to them. Any suggestions?
seo
Wow!!! Great Css, i was looking for it. I will use it in my current website.
[email protected] Media Strategy Plan
IE 9 fix change border radius width to 8px rather than 0.5em
Remi
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
Like that ? It does’nt work…
Robin
Really a best website for the web designers. I am really interested to create css button..So i will learn it
irnaf
send some easy code
Abolfazl Beigi
dude it’s very easy. just try some more.
Abolfazl Beigi
Thanks, very useful.
Joe
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
Thanks for this help.
Rajesh
Thanks this is very useful for me…
Preetam
Great code. Thanks for sharing this.
Supreme
Superb, already using it :)
Mary
Beautiful! Thanks!
Only one different button color in my ul/li does not work, how do i solve that…
FlyOn
Thank you sir! elegant, simple, and very usefull!
Peter Drinnan
Oh man this is a lifesaver. Thanks!
Thomas
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
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
thanks really helpful..
jing
it’s so cool!