Cool Dark and Light CSS3 Buttons From Me to You. Desaturated Coolness!

By Melvin José on March 5th, 2010 | Articles | 2 Comments

About the Author: Melvin José

This guy really needs to get from behind the keyboard to spend some time with his lovely wife. The (gr)avatar is a pic of her to remind him he needs to take a break.

I made these CSS 3 buttons and thought I would share them with anyone who would like to use them. They have a desaturated look and get ‘inverted’ on mouse over. Even added an extra little touch when clicked. Go check ‘em out. Remember though, don’t use Internet Explorer or else they won’t look good.

Files

Demo | Download

The Buttons | Desaturated Coolness

CSS3 Buttons

The HTML

    	
<a class="button button-dark c111" href="#"><span>Please Click Me!</span></a>
<a class="button button-dark c333" href="#"><span>Please Click Me!</span</a>
<a class="button button-dark c555" href="#"><span>Please Click Me!</span></a>
<a class="button button-dark c777" href="#"><span>Please Click Me!</span></a>
<a class="button button-dark c999" href="#"><span>Please Click Me!</span></a>

<a class="button button-light fff" href="#"><span>Please Click Me!</span></a>
<a class="button button-light eee" href="#"><span>Please Click Me!</span></a>
<a class="button button-light ddd" href="#"><span>Please Click Me!</span></a>
<a class="button button-light ccc" href="#"><span>Please Click Me!</span></a>
<a class="button button-light bbb" href="#"><span>Please Click Me!</span></a>

The CSS

    	
a.button {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    cursor: pointer;
    display: block;
    font-family: Verdana, “Helvetica Neue”, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 10px 35px 11px;
    position: relative;
    text-decoration: none;
}

a.button-dark {
    border: 4px solid rgba(0, 0, 0, 0.2);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

a.button-dark:hover {
    background-color: #fff;
    color: #333;
}

a.button-light {
    border: 4px solid rgba(0, 0, 0, 0.2);
    color: #222222;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

a.button-light:hover {
    background-color: #333;
    color: #fff;
}

/* Light Colors */
a.bbb {background-color: #bbb;}
a.ccc {background-color: #ccc;}
a.ddd {background-color: #ddd;}
a.eee {background-color: #eee;}
a.fff {background-color: #fff;}

/* Dark Colors */
a.c111 {background-color: #111;}
a.c333 {background-color: #333;}
a.c555 {background-color: #555;}
a.c777 {background-color: #777;}
a.c999 {background-color: #999;}