Glossy Buttons - Easy Reusable CSS

buttons: <button>

links: <a href="#">

Pink midnight lime blue coffee strawberry

inputs: <input>

Glossy Buttons Using Gradients
HOW TO:

There are lots of services that will generate fancy gradients for the plethora of browsers out there. However, if you want to change your color scheme you usually have recreate those gradients from scratch in a more or less trial and error manner.

This tutorial will demonstrate how to make just one gradient that you can use over and over again. We're going to separate the gradient from the color.

In order to demonstrate, we're going to make some buttons. We'll also normalize the appearance of the buttons so you can use any element, like <button>, <a>, or <input> and our buttons will all look the same. And to make IE behave, we'll add some IE specific rules and use a 1 pixel background-image. You'll still be able to adjust colors in a single line of CSS in the same way as with the gradients.

Step 1 - The HTML
Let's set up a nice neat new HTML file with some conditional statements at the top, so we can target a bunch of versions of IE as needed.

<!DOCTYPE HTML>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9 ]>   <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <title>Glossy Buttons</title>
        <style></style>
    </head>
    <body>
    </body>
</html>

Step 2 - The Elements
We'll add some buttons. Make a row of buttons <button>, a row of links <a>, and a row of inputs <input>. The trick will be to make all the different types of elements look and behave (almost) exactly the same. Most people, namely non-developers or designers, won't even see the "almost" part. Inside the <body> tag, insert:

<p>buttons: &lt;button&gt;</p><p> <button class="pinkish">Pink</button>&nbsp;<button class="dark">midnight</button>&nbsp;<button class="lime">Lime</button>&nbsp;<button class="blue">blue</button>&nbsp;<button class="coffee">coffee</button>&nbsp;<button class="strawberry">strawberry</button></p>
                <p>links: &lt;a href="#"&gt;</p><p><a href="#" class="glossy-button pinkish">Pink</a> <a href="#" class="glossy-button dark">midnight</a> <a href="#" class="glossy-button lime">lime</a> <a href="#" class="glossy-button blue">blue</a> <a href="#" class="glossy-button coffee">coffee</a> <a href="#" class="glossy-button strawberry">strawberry</a> </p>
                <p>inputs: &lt;input&gt;</p><p><input type="submit" class="glossy-button lime" value="submit"> <input type="reset" class="glossy-button blue" value="reset"></p>

Step 3 - The main CSS
We'll make one rule for the button element and our .glossy-button class, that resets a bunch of default appearances. And we'll make another rule that adds some additional properties to input elements that have the .glossy-button class. Insert inside the <style> tag:

button, .glossy-button{
                font-family: helvetica, arial, sans-serif;
                font-size:14px;
                letter-spacing: 1px;
                text-transform: capitalize;
                line-height:30px;
                height:30px;
                color:#fff;
                cursor:pointer;
                display: inline-block;
                width:auto;
                text-decoration:none !important;
                
                position: static;
                /* these rules for the button press effect */
                padding-top:1px;
                padding-bottom:2px;

                margin-top:-1px;
                margin-bottom:1px;

                padding-left:10px;
                padding-right:10px;

                margin-left:-1px;
                margin-right:1px;
                
                /* default background-color */

                background-color: #010732;
                
                /* the mighty gradient */

                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
                background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
                background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
                background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */
                background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */

                        
                /* some nice roundy corners */
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
                
                /* for links in chrome */
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box; 
                box-sizing: border-box; 
                
                
                /* a very subtle drop-shadow that ehances the pressed button effect */
                -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
                -moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 0.30);
                box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.30); 

                /* remove any inherited or default borders - especially important for the <button> element*/
                border: 0 !important;

                /* a subtle text inset effect which will also help to enhance the pressed button effect */
                text-shadow:  rgba(255, 255, 255, 0.1) -1px 0, rgba(0, 0, 0, 0.3) 1px 1px;
                
                
                /* and of course a little animated background-color fade effect */

                -webkit-transition: background-color 0.3s ease;
                -moz-transition: background-color 0.3s ease;
                -o-transition: background-color 0.3s ease;
                -ms-transition: background-color 0.3s ease;
                transition: background-color 0.3s ease;

            }
/* submit and reset buttons */
            input.glossy-button{
                vertical-align: middle;
                line-height: normal !important;
                padding-bottom: 0;
            }
/* remove ugly dotted border */
            :focus{
                outline:none;
            }
            ::-moz-focus-inner{
                border:0;
            }

Step 4 - The Colors
I chose for my buttons to change color as I hover over them. But you can change these to display whatever colors you like automatically.

/* the colors */
            
            .pinkish:hover{
                background-color: #Ff3366;
            }
            .lime:hover{
                background-color: #59b606;
            }
            .blue:hover{
                background-color: #027bbf;
            }
            .coffee:hover{
                background-color: #832f02;
            }
            .strawberry:hover{
                background-color: #f92020;
            }
            .dark:hover{
                background-color: #000000;
            }

Step 5 - Pressed button rules
Adjust the margin and padding to create a "physically" pressed button on click.

/* when pressed */
            button:active, .glossy-button:active{
                background-color: #333333;
                border-color: #333333;
                color:#eeeeee;
                
                padding-top:0;
                padding-bottom:0;

                margin-top:0;
                margin-bottom:0;

                padding-left:10px;
                padding-right:10px;

                margin-left:0;
                margin-right:0;
                
                box-shadow: none;
                
                text-shadow: rgba(0, 0, 0, 0.4) 0 -1px, rgba(255, 255, 255, 0.3) 0 1px;
                color:rgba(255, 255, 255, 0.9);

            }

Step 6 - Necessary Adjustments for IE7, 8, and 9

.ie9 button:active{
                padding-top:0;
                padding-bottom:2px;

                margin-top:-1px;
                margin-bottom:0;

                padding-left:10px;
                padding-right:10px;

                margin-left:-1px;
                margin-right:0;
                
                border-top:1px solid white !important;
                border-left:1px solid white !important;
                
                height:31px;
                
                border-radius: 5px;
            }
            

            .ie button, .ie .glossy-button {
                background-image:url(images/butt-bg_slither.png);
                background-repeat: repeat-x;
                background-position:center center;

            }   
            .ie8 button, .ie8 .glossy-button {
                border:1px solid #ccc !important;
                height:32px;
            }
            .ie7 button{
                height:31px;
            }
            .ie7 .glossy-button{
                height:28px;
            }
            .ie7 .glossy-button:active{
                padding-bottom: 2px;
            }

IE7 does leave a little to be desired, but let's hope we don't see much more of IE7.

Enjoy!

Glossy Buttons Using Gradients HOW TO:

Glossy Buttons Using Gradients
HOW TO: