<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Fancy-pants Reusable Gradients and Buttons

Published on
9,464 Points
2,764 Views
2 Endorsements
Last Modified:
Approved

How to make really yummy glossy buttons that beg to be clicked again and again, using gradients.


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>

Open in new window

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>

Open in new window

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;
            }

Open in new window


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;
            }

Open in new window


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);

            } 

Open in new window

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;
            }

Open in new window


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

Enjoy!

Download the file and IE graphic here:glossy-buttons-for-EE.htmlthe image for IEOr check it out here:
http://candpgeneration.com/glossy-buttons-for-EE.html
2
0 Comments

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month