CSS3 Gradients Make Having Multiple Button Backgrounds a Snap!
Thanks to the future, and us living in it, we can now create swell little buttons like these that can have their color changed with just a single line of code.
Firstly, we’ll create our buttons in HTML. In this example I’ve created two buttons, one with a class of primary and one with a class of secondary. This is a normal naming scheme I use to denote particular buttons which are the primary link on a page or page element (such as a call to action or submit button on a form) and those which have a secondary purpose (such as the dreaded “reset” button on a form).
<button type="submit" class="primary">Call to Action!</button>
<button type="submit" class="secondary">Another Option</button>
Now lets set up the basic CSS to make it look like a button that didn’t come right off the factory line:
button {border-radius:5px;
border:0;
padding:15px 25px;
font-family:Helvetica,sans-serif;
color:white;
font-weight:bold;
letter-spacing:-1px;
font-size:19px;
text-transform:uppercase;
margin:10px auto;}
.primary {background-color:#fb7600;}
.secondary {background-color:#327fac;}
Depending on your browser, that’ll give you something like the following:
That’s not what we’d discussed above though, we were talking about gradients. Let’s add them:
button { /* fallback/image non-cover color */
background-color: #1a82f7;
/* Safari 4+, Chrome 1-9 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.4)));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
/* IE 10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
/* IE6-8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 );
}
Wow, that’s a lot of code. The reason for all of that fancy code is that no browser is actually supporting true CSS3 gradients, so these are all browser prefixed versions of the CSS3 spec that Google, Microsoft, Mozilla, etc. are using until the final spec is released and they can make sure their implementations match up. The code above pretty much gives us unanimous support across all browsers…except IE9, which gets clunky. If you’d like to support IE9, add this to the top of the .button stack of properties.
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
Crazy right? I agree. Apparently that’s SVG and IE9 needs it. You can get your own code using this wonderful CSS3 Gradient Generator.
But we’re not done yet, because IE9 further complicates things, since it will still recognize that filter property we used for IE 6 – 8. So we need to then supply IE 9 with the following override, which can be done in your page’s <head> tag, or by feeding just IE9 it’s own stylesheet.
<!--[if IE 9]>
<style>button {filter:none;}</style>
<![endif]-->
Okay now we’re all setup, so what about the easy one-line change I had mentioned that’ll make all of this coding worth it. After all, by now you could’ve easily banged out a new Photoshop image, right?
At this point, we’re so setup that all we need to do is change the colors found in the .primary and .secondary selectors, and the CSS3 gradient overlay we used takes care of the rest. What we’re doing here is assigning a background-color via the classes primary and secondary. Then we’re assigning a background gradient using CSS3 on the <button> itself. The background gradient is actually just black the from top to bottom, but with an alpha transparency of 40% – 0% from bottom to top, letting the background color shine through.
You can use this all in combo with :hover as well to get some fun rollover affects. You’d just do something like this (though this won’t work in IE6, but really it’s gone anyway):
.primary:hover {background-color:#00fb3b;}
.secondary:hover {background-color:#f1ee09;}
Here’s a demo, and you can use Chrome, Safari or Firefox’s inspector to try and change the colors yourself!