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

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

Validating a webform is very important if you want your visitors to fill in all the required fields. In this screencast I’ll show you an easy way to validate your forms using the jQuery Validation plugin. I’ll also show you how to add you own custom ‘error’ messages.

Screencast Info

Length

19:46 (I know I said “quick screencast”, sorry :P)

Links

• jQuery hotlinks by Google
• jQuery Validation plugin page
• Plugin Documentation

Files

Demo | Download

The Screencast

Lorem ipsu….uuumm wait! I’ll have to stop using dummy text from now. This is it. The website is going live! I’m so excited about this, the birth of the Artelix Design Blog. O dear, o dear, o dear… I’m so nervous.

Melvin Jose

Hello there! My name is Melvin José and I like to welcome you to my blog. If you want to know more about me then please do visit the about page.

Blog

My plans for this blog are pretty simple. I’m going to regularly posts screencasts and articles related to webdesign en webdevelopment. The design and content of this website are inspired by none other then:

• Smashing Magazine
• CSS-Tricks
• Nettuts

I’m not trying to compare this website to any of them! Cmon, pffffff! I’m just saying I look up to their creators because of what they are doing for the designcommunity. This website is just my share of giving back to the community for what it has given to me.

So wish me luck!