FireFox Leading the Pack: Gradients on Buttons

April 3, 2010 by aaron
FireFox Leading the Pack: Gradients on Buttons

See those wonderfully beautiful article and comment toggle buttons at the top of every post? (Or in the post image for those reading in a feed reader.) Those are images, but they weren’t created in Photoshop: they are screenshots of buttons designed with Firefox gradients. That’s right, when I was working on them, I wanted buttons done entirely in CSS, but none of the other browsers support both gradients on the button and the gradient borders needed to give the button a feeling of depth without images.

However, the code that was used to create these in firefox is as such.

    background: -moz-linear-gradient(bottom, #999, #ccc);
    -moz-border-radius:8px;
    -moz-border-bottom-colors: #ccc #999 #6666;
    -moz-border-top-colors:  #ccc #999 #666;
    -moz-border-left-colors: #ccc #999 #666;
    -moz-border-right-colors: #ccc #999 #666;

The first line creates the gradient inside the button, the second creates the curved borders and the final 4 lines create a border gradient 3px wide. The CSS above won’t work exactly as expected because you need to separately define a border that has the same width as the number of colors, so the entire .toggle class looks like:

.toggle{
    color:#333;
    font-size:1.1em;
    height:31px;
    width:86px;
    border:3px solid #ccc;
    /*//mozilla*/
    background: -moz-linear-gradient(bottom, #999, #ccc);
    -moz-border-radius:8px 8px 8px 8px;
    -moz-border-bottom-colors: #ccc #999 #6666;
    -moz-border-top-colors:  #ccc #999 #666;
    -moz-border-left-colors: #ccc #999 #666;
    -moz-border-right-colors: #ccc #999 #666;
}

The .toggled class is:

.toggled{
    border:2px solid #333;
    background: -moz-linear-gradient(bottom, #AAA,#999);
    -moz-border-bottom-colors: #333 #999;
    -moz-border-top-colors:  #333 #999 ;
    -moz-border-left-colors: #333 #999 ;
    -moz-border-right-colors: #333 #999;
}

And since a hover class increases usability:

.toggle:hover{
    background: -moz-linear-gradient(bottom, #AAA, #EEE);
    -moz-border-bottom-colors: #aaa #ccc #999;
    -moz-border-top-colors:  #aaa #ccc #999 ;
    -moz-border-left-colors: #aaa #ccc #999 ;
    -moz-border-right-colors: #aaa #ccc #999 ;
}

This is not a Google Chrome or IE bashing post, instead of leaving it entirely in CSS and having it degrade in all other browsers to some extent, I took a screenshot and replaced all the CSS with a CSS sprite.

.toggle{
    color:#333;
    font-size:1.1em;
    background: url('./style/images/button.toggle.png') no-repeat 0 0;
    height:31px;
    width:86px;
    border:0;
}
.toggled{
    background-position:0 -31px;
}

It was actually easier to design the button in Firefox than in something like photoshop especially since I used the WebDeveloper toolbar to write the CSS in the browser itself.

comments powered by Disqus

Do you have an awesome idea?

Let us know what you want to create.

Start your project