Artelix Design

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

By Melvin José on March 5th, 2010 | Articles | 3 Comments
avatar
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;}
    	
    

Share and Enjoy this Post:

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • Yahoo! Bookmarks

Subscribe to the comments RSS 2.0 feed. Trackback from your own site.

3 comments

Deepu Balan on April 7th, 2010

Cool CSS buttons Melvin… Thanks for sharing… :-) Nice blog, Post more…

Barton on October 11th, 2010

Hi, great demo….

Any change of inset text examples?

new balance on July 26th, 2013

I think the admin of this website is truly working hard in support of his web
site, because here every stuff is quality based information.

Leave a comment

CommentLuv Enabled