Cross-browser CSS gradient buttons

February 1, 2011 by Catalin Rosu - 43 comments

Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.

In this article you will see how you can create a set of gradient buttons just with CSS (no images).

Oh no! Not another CSS3 buttons!

That’s what you may say but, oh yes :) … This is another buttons set, powered by almighty CSS3 (and IE gradient filters).

Features

Scalability – Scale the buttons using font-size.
Adjustability – Change padding and font-size and there you go.
Flexibility – Apply the styles to any HTML elements.
Fallback styles – Graceful degradation for other browsers.
Usability – Normal, hover and active states are available.

“How it’s made”

RGBA color mode
Box shadow
Text shadow
Rounded corners
Gradient patterns thanks to @leaverou for its enlightening article about CSS3 gradients techniques

View demo

HTML structure

Let’s see how the HTML looks for the blue button for example:

<a href="#" class="button button-blue">
    <span>Button</span>
</a>

Multiple classes are used in order to have minimal HTML and CSS files.

The top border could have been achieved with an inset box-shadow but, this way the CSS3 buttons will degrade graceful, as you will see later in this article.

The CSS

.button
{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    
}

.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}

.button span
{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
    
    /* The background pattern */
    
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Pattern settings */
    
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
    background-size: 3px 3px;            
}

.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

Blue button:

.button-blue
{
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}

.button-blue:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');            
}

.button-blue:active
{
    background: #4477a1;
}

And so on for the other buttons…

View demo

Browser support

Mozilla 3.6+

Full support, including CSS3 gradient patterns (though I noticed some performance issues when page is rendered).

Webkit (Safari, Chrome)

The buttons are rendered very nice on Webkit browsers.

Opera 11

Unfortunately, Opera lacks any support for CSS gradients, still the buttons render very nice as other CSS3 features are not missing here.

IE6, IE7, IE8

With filters, CSS gradients are possible also when talking about IE6 or IE7.

IE9

Besides the other IE browsers, IE9 supports rounded corners and box shadows, although the corners don’t look perfect as you can see below.

That’s all!

It would be recommended to use conditional comments when using filters. This way your CSS file will be cleaner and you will avoid performance issues.

Having said that, I hope you enjoyed this article and if you did don’t forget to follow me on Twitter or to leave a comment below!

If you enjoyed this article, get updates via RSS or email (it's free).

43 thoughts on “Cross-browser CSS gradient buttons”

Rudy Azhar on February 2, 2011 at 11:31 said:

This tutorial that I been looking for, thanks for sharing. :D
Reply ↓
Quan on February 4, 2011 at 06:46 said:

this is awesome! been looking for this!
Reply ↓
Red on February 7, 2011 at 20:59 said:

@Rudy and @Quan thanks for reading it!
Reply ↓
andy on February 8, 2011 at 16:32 said:

that 1px border top on ‘span’ is very great idea, i really like it, keep posting, and thanks a lot
Reply ↓
Gabe on February 8, 2011 at 16:42 said:

One thing I would change in the CSS would be to put the default declaration AFTER the vendor-specific declarations. For example box-shadow should come after -moz-box-shadow and -webkit-box-shadow. That way when full browser support arrives, your code will render according to the spec rather than specific to the vendor because the default declaration comes after the vendor declarations.
Reply ↓
- Red on February 8, 2011 at 17:01 said:
  
  Gabe, that’s a good one! Thanks for pointing that out!
  Reply ↓
- Volomike on March 8, 2011 at 09:10 said:
  
  Good point on that one. Geez. I need to edit a ton of my CSS files to ensure I follow this, going forward.
  Reply ↓
Shaz3e on February 12, 2011 at 21:18 said:

IE 6,7, or 8 Rounded corners can fixed check with CSS 3 as well, go try it
Reply ↓
Lea Verou on February 21, 2011 at 12:11 said:

The inner span is not required. You can have multiple backgrounds and the top border could be produced by an inset box shadow (box-shadow: 0 1px 0 rgba(255,255, 255, .5) inset;)
Thanks for the mention!
Reply ↓
- Red on February 21, 2011 at 13:18 said:
  
  Thanks for your comment Lea, much appreciated!
  I also mentioned above that alternatively, the top border could be produced by an inset box-shadow.
  When I wrote this article, I just wished to have that top border also for the browsers that doesn’t support the box-shadow property.
  Reply ↓
Volomike on February 21, 2011 at 21:31 said:

Made my afternoon to find this. The white edge and the fallbacks are fantastic. As well, I played with where you marked off “pattern” and set it to “1px 1px” to get rid of the grid look that wasn’t my cup of tea. Also, I changed the font to simply “sans” because I personally don’t like Trebuchet. What’s also interesting was that I could merely add another class and style just the font-size (in pixels), and the whole button changed right along with it. Well done, and I tweeted this.
Reply ↓
- Red on February 21, 2011 at 21:47 said:
  
  Thanks Volomike, nice to hear you liked it!
  Reply ↓
Martin on February 21, 2011 at 21:34 said:

Crossbrowser? Just use images :)
Reply ↓
- Red on February 21, 2011 at 21:52 said:
  
  Martin, of course, you can always use images for a 100% cross-browser solution.
  But, as you already know, this is just a demo that shows that similar effect can be achieved without an extra HTTP request.
  Thanks for your comment!
  Reply ↓
  - saeed on November 8, 2012 at 22:21 said:
    
    it was useful .thanks
    Reply ↓
Volomike on March 30, 2011 at 05:21 said:

Anyone having issues with these buttons on FF4? I’m noticing it’s much different than FF3, showing me harsher radial lines instead of a smooth, blended radial. Of course, I was running FF4 in a Windows VM on Ubuntu, however. Must test on a real Windows system….
Reply ↓
- Red on March 30, 2011 at 13:35 said:
  
  It seems that FF4 does not use the background-size property with the -moz- prefix anymore.
  As a solution: add also the background-size property.
  I’ll also update the CSS for this, thanks for letting us know!
  Reply ↓
Custom Buttons on August 9, 2011 at 23:03 said:

Thank you SO much for the tutorial and clean-code in this. I was looking for how to properly do “rounded corners” on buttons but they have always stumped me. Adding gradients really makes them pop! Great job and your demo is appreciated! (side note: it seems IE always falls behind the curve of making things look nice. The round corners are … almost there on IE9, still disappointing though.)
Reply ↓
Marian on September 8, 2011 at 22:53 said:

Where are the rules that will work on IE8 and IE7?
Reply ↓
Marian on September 8, 2011 at 22:53 said:

OH never mind I see the Filter rules…. :-) Thank you.
Reply ↓
- Red on September 8, 2011 at 23:07 said:
  
  No problem, nice to hear you found it! ;)
  Reply ↓
  - Marian on September 8, 2011 at 23:12 said:
    
    Shoot I can’t get it to work…I think I’ve been staring at code too long today….
    Reply ↓
Curtis on September 26, 2011 at 20:09 said:

Anyway around the IE9 corner issue?
Reply ↓
Wiki Blogger on October 5, 2011 at 14:25 said:

Thanks for sharing…great, but problem with IE6.
Reply ↓
Andrew on October 11, 2011 at 16:31 said:

Can I make two styles – one. And if so, how is this possible? I tried and I made it! But does not display the color of links for browsing. What I do not do that? Sorry for some mistakes. Its google translate from russian language
Reply ↓
kevin on October 17, 2011 at 16:48 said:

Nice buttons. Thanks for this article.
Reply ↓
Miklos on November 22, 2011 at 22:34 said:

How do you define a button width so multiple buttons under each other can be the same width. Sorry if I’m missing something I don’t see this option anywhere… Thank You.
Reply ↓
- Red on November 22, 2011 at 23:44 said:
  
  Hey Miklos, in the example above, all the anchors are set to inline-block and they contain the same text (Button – for demo purposes). That’s why they have the same size.
  Though, you can just define your own custom width for the buttons.
  Catalin
  Reply ↓
fowziey on December 19, 2011 at 08:06 said:

I’m impressed with the use of 1px border for fallback. Nice tut and quite clear explanation. Thanks
Reply ↓
- Red on December 19, 2011 at 13:41 said:
  
  Thanks, nice to hear you liked this tutorial.
  Reply ↓
xxx on January 14, 2012 at 13:13 said:

Demo is slow as the hell. FF 9.0.1
Reply ↓
Jules on April 10, 2012 at 12:19 said:

It’s possible to have an IE9 gradient background that doesn’t bleed into the rounded corners by using a url reference to an SVG background. There are many generators available online. If you’d like a generator that creates the SVG code for all possible CSS linear and radial gradients then see http://www.visualcsstools.com. There’s are a free and a cheap version.
Reply ↓
Stewart on April 12, 2012 at 16:12 said:

Nice demo
Reply ↓
design-o-vision on June 1, 2012 at 19:25 said:

Thanks for sharing your work with us! These buttons are beautiful!
I used your technique to create the buttons on this site: http://techzone.illinoisstate.edu/ with credit given in the CSS.
Reply ↓
cgvector on July 12, 2012 at 12:38 said:

ie-9 border radius not working with gradient what to do..??
Reply ↓
mehdi on July 20, 2012 at 09:40 said:

very nice-thanks
Reply ↓
smithpr on July 20, 2012 at 21:53 said:

Great tutorial! I’m writing an application using JQuery which will need to generate custom (pretty) buttons based on a single CSS color that the user specifies (in a SharePoint 2003 list, no less).
In order to do that; I’d need a way of programmmatically creating an appropriate gradient featuring a given color. Would you recommend that I do this by applying a formula to the CSS color codes (which would require converting named colors into hex), or by layering on different gradients with transparency that lighten and darken the specified color?
Reply ↓
Catalin Rosu on July 20, 2012 at 23:48 said:

Hey, I’m glad you like this tutorial. Also, you may check my latest CSS3 buttons too.
Now, to programmatically create gradient buttons based on a color, I’d go with the solution I’m talking about here.
It’s about transitioning the background-color and apply a gradient image to it which fades to transparent value.
Hope that helps, good luck!
Reply ↓
- smithpr on July 21, 2012 at 00:56 said:
  
  Thank you for the prompt reply! While I’ve solved my original problem (with heavy use of your examples here), I’ll definitely check out that article. For someone as new to web design/development as me, however, each of your articles is a veritable Pandora’s Box filled with deep and mysterious teachings!
  Reply ↓
Diego on October 18, 2012 at 22:48 said:

I noticed that when you click near the top or bottom border of the button, the click event does not occur. This is because the CSS in the button:active, that uses top:1px. The only way I found to solve this is removing that part of the CSS (it loses the “animation” effect). Many thanks.
Reply ↓
Marcelo on December 4, 2012 at 04:31 said:

Getting real serious lag on newest version of Firefox. Any way to make a backup for Firefox that looks similar but functions correctly?
Reply ↓
aditya on December 8, 2012 at 18:18 said:

Great great and great
Reply ↓
Danny on March 14, 2013 at 18:10 said:

There is a lag on Firefox … is there some way to correct this? … please help
Reply ↓