Mozilla

building beautiful buttons with css gradients

A special thanks to Ryan Doherty for building this demo and making it easy for me to turn it into a tutorial.

In this demo we’ll walk through a simple use case for the new gradient capabilities coming in Firefox 3.6 (see related article). We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties. The button in question was developed for the next version of our Personas site.

Using a CSS-based method to generate buttons is a huge upgrade for web site developers. It means you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.

You can see the final version of this demo, or follow along with the steps outlined here.

Creating the Button

A button is just a rectangular space with a link in it. We can create that with a very simple chunk of HTML:

  <a class="linear" href="http://getpersonas.com">
    <span>Get Personas for Firefox</span>
    <span class="info">It's free and installs in seconds</span>
  </a>

This creates a paragraph element and sets a fixed width. The internal “button” is actually a simple <a> link that contains text.

Once we have the width set on the button we need to force the <a> to act like a block element so that the text inside will flow as part of a single element instead of showing up as two distinct parts:

display: block;

We want to choose some nicer fonts and a nicer style:

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 138.5%;
 
text-align: center;
text-decoration: none;

And add some padding around the text and set rounded corners:

padding: 10px;
-moz-border-radius: 10px;

We set a border around the button and set a background color as a fallback for other browsers. (Except, of course, for IE. See the note below.)

border: 1px solid #659635;
background: #99ca28;

We also want to set the color of the text and add a nice drop shadow to make the text look embossed onto the button:

text-shadow: -1px -1px 2px #777777;
color: #ffffff;

Once we have that we can use the -moz-linear-gradient CSS property to define the gradient so that it has a nice bevel look at the top:

background: -moz-linear-gradient(top, #CFE782 0%,
                                      #9BCB2A 2%,
                                      #5DA331 97%,
                                      #659635 100%);

The syntax here is pretty simple. The “top” means that it starts at the top of the area and heads down to the bottom of the button. The rest of the syntax defines what are called “color stops.” These allow you define gradient transitions that actually transition across more than two colors. This is used in this case because the bevel effect requires a non-linear transition from one color to the next.

In the syntax above, it defines a starting color (0%), an bevel effect (2%), most of the transition (97%) and the border color to finish (100%.) This creates the effect where it’s very light at the top as if there was a light source moving to a darker color near the bottom.

IE Note:

A pithy note about our good friend, Internet Explorer. While older versions of Firefox and Safari both handle the background: -moz-linear-gradient gracefully by not affecting background rendering when they run into a property they don’t know how to handle, IE just shows a white background. One possible work around for this is to include a later background: property for IE in a separate style sheet that’s loaded once this style sheet is loaded. There are probably other ways of handling this, but it’s worth noting that this is an issue.

27 comments

Comments are now closed.

  1. Kamal wrote on November 30th, 2009 at 14:34:

    luks kool.. but whn ll it implemented in standard CSS 4 all browsers??

  2. Rich wrote on November 30th, 2009 at 15:07:

    It’s worth having a look at the modernizr library for javascript – it does feature detection for things like this that allow you to apply different styles to elements in browsers that don’t implement the feature.

    It’s worth noting that Webkit also supports gradients, but using different syntax, so you can get this to work in both Gecko and Webkit, meaning it’s really only IE and Opera that get a flat button. To those browsers you could either serve a gradient image (if it’s a big bit of design like a background), or not bother (if it’s a button).

  3. nemo wrote on November 30th, 2009 at 17:10:

    Hey. Thanks for this suggestion.
    Up until now, I’ve always handled arbitrarily long site content by either using a tall background image, or a background image that faded to a solid colour.

    Now, thanks to the writeups on hacks.mozilla.org, I added an extra bit of what I think is prettiness for supporting browsers.
    http://melusine21cent.com/mag/node/42

    This page slowly fades to a dark colour now in Firefox and Safari – I haven’t tested Safari yet.

    Oh. If you look in comments for:
    /mag/themes/melusine/style.css you can see I do have a problem I haven’t figured out.

    I wanted to defined two gradients, to handle the case of no background image in a more attractive fashion. I wanted one gradient to go from a colour representing the top of the current image to the bottom of the current image, and another to continue on past that.
    I tried doing it using a single declaration:
    -moz-linear-gradient(#92dbd6, #077582 1052px, #022228)
    But this resulted in a visible discontinuity. The colour was not precisely matching at 1052px.

    I then tried:
    -moz-linear-gradient(#92dbd6, #077582 1152px), -moz-linear-gradient(#077582 1152px, #022228)

    But this really did not work at all.

    It isn’t a big deal since people usually have that image enabled, but it might be nice to get it working, so I thought I’d ask.

    Oh, and, yes, I had to add an override for IE in the condcom since otherwise it did screw up background-image, choosing to choke on the invalid (from its perspective) line instead of throwing it away.

  4. nemo wrote on November 30th, 2009 at 17:12:

    (one reason it would be nice to get it working is the jpeg is rather large and a smooth gradient would look nicer while loading)

  5. Neil Rashbrook wrote on December 1st, 2009 at 03:33:

    When you’re setting the background colour, why not use the background-color property?

  6. Goulven wrote on December 1st, 2009 at 05:45:

    An inset box-shadow also works for simple bevels.


    beveled link text

    Using box-shadow, -moz-box-shadow and -webkit-box-shadow, it works in all modern browsers, including Firefox 3.5.

  7. David Tenser wrote on December 1st, 2009 at 07:22:

    Very cool. Is it possible to also get a drop-shadow for the whole button as we use on http://support.mozilla.com/en-US/kb/ (for the search box)?

  8. Goulven wrote on December 1st, 2009 at 11:17:

    The style attribute has been stripped from my previous comment, here’s what it should have contained:

    a href=”#” style=”background: #000;box-shadow: 0 5px 10px #fff inset;-moz-box-shadow: 0 5px 10px #fff inset;-webkit-box-shadow: 0 5px 10px #fff inset;”
    Beveled link text
    /a

  9. Ryan Doherty wrote on December 3rd, 2009 at 23:22:

    @David: yes, you can use -moz-box-shadow https://developer.mozilla.org/En/CSS/-moz-box-shadow

  10. Jakob K… wrote on January 17th, 2010 at 10:57:

    This tutorial is nice!
    The button is beautiful!

  11. Pingback from Learn how to create an embossed and beveled button using CSS only « Web Page Authority Blog on January 25th, 2010 at 10:21:

    [...] Building beautiful buttons with css gradients ✩ Mozilla Hacks – the Web developer blog In this demo we’ll walk through a simple use case for the new gradient capabilities coming in Firefox 3.6 (see related article). We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties. [...]

  12. Ryan Cowles wrote on May 1st, 2010 at 08:55:

    Beautiful! Clean, professional, and all CSS. Thanks for the post!

  13. Matthias wrote on May 1st, 2010 at 13:32:

    It would be possible to use

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9BCB2A’, endColorstr=’#5DA331′);

    for IE compatibility. It’s not at nice since it won’t have the bevel effect but it’s still better than just a white background!

  14. Pingback from CSS 그라데이션(gradient)으로 멋진 버튼 만들기 ✩ Mozilla 웹 기술 블로그 on June 23rd, 2010 at 20:46:

    [...] 원본: http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/ [...]

  15. Pingback from 64 CSS3 Tutorials & Techniques | Digital Pizza on July 1st, 2010 at 08:14:

    [...] Beautiful Buttons with CSS Gradients Using a CSS-based method means you don’t have to regenerate images every time you change text, pages will load much faster and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context. In this demo you’ll be shown a simple use for the new gradient capabilities and learn how to build a nice-looking embossed and beveled button using gradients and existing CSS properties. [...]

  16. Pingback from CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | Programming Blog on April 14th, 2011 at 05:32:

    [...] Building beautiful buttons with css gradients [...]

  17. Pingback from CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | JCODING on May 15th, 2011 at 12:34:

    [...] Building beautiful buttons with css gradients [...]

  18. Pingback from CSS3的按钮10+ Awesome Ready-To-Use Solutions | WebCooky on May 20th, 2011 at 10:56:

    [...] Building beautiful buttons with css gradients [...]

  19. Pingback from Most Hot Latest CSS And CSS3 Buttons, 110 Best Of The Best Sets ! on July 31st, 2011 at 06:01:

    [...] Beautiful Buttons With CSS Gradients [...]

  20. Pingback from 11个CSS3按钮制作教程 | ChaoDe on August 30th, 2011 at 21:30:

    [...] » 查看教程 HTML+CSSdesign, html+css ← Web移动应用:HTML5,CSS和JavaScript /* */ [...]

  21. Pingback from 11个CSS3按钮制作教程 | html5粉丝 on August 31st, 2011 at 21:52:

    [...] » 查看教程 [...]

  22. Pingback from 24 best tutorial how to create sexy css3 buttons – CSS | Leoc magazine on September 6th, 2011 at 07:15:

    [...] 10. Beautiful Buttons with CSS Gradients [...]

  23. Pingback from Unleash IT Blog » Top 10 CSS3 buttons tutorials from Cats Who Code. on September 7th, 2011 at 01:10:

    [...] » View tutorial Designy [...]

  24. Evan wrote on October 13th, 2011 at 15:16:

    Demo link is broken, no screenshots in the article. Ugh.

  25. Pingback from 11个CSS3按钮制作教程 | 佚名工作室 on December 28th, 2011 at 20:31:

    [...] » 查看教程 [...]

  26. Pingback from The Web logix Blog » Blog Archive » CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) on April 8th, 2012 at 05:53:

    [...] Building beautiful buttons with css gradients [...]

  27. Carl wrote on September 28th, 2012 at 04:03:

    Perfect Chris :)

    Thank you very much for this, currently using on the work website (with one or two minor alterations :)

Comments are closed for this article.