For the love of CSS3 and for my first ever blog post, let’s bring Orman’s Chunky 3D Web Buttons to life.

Desired End Result

The Markup

Chunky Button

The CSS

.chunky_button {
	border: 1px solid #d1d1d1;
	color: #818181;
	text-shadow: 0 1px 0 #fff;
	padding: 15px;
	font-weight:bold;
	font-size:16px;
	border-radius:10px;
	position:relative;
	top:0;
	
	/* css3 vendor-specific gradients */
	background-color: #f0f0f0;/* fallback */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), to(#e6e6e6)); /* Safari 4-5, Chrome 1-9 */
	background-image: -webkit-linear-gradient(top, #f3f3f3, #e6e6e6); /* Safari 5.1, Chrome 10+ */
	background-image:    -moz-linear-gradient(top, #f3f3f3, #e6e6e6); /* Firefox 3.6+ */
	background-image:     -ms-linear-gradient(top, #f3f3f3, #e6e6e6); /* IE 10 */
	background-image:      -o-linear-gradient(top, #f3f3f3, #e6e6e6); /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, #f3f3f3, #e6e6e6); /* according to current CSS3 specification  */
	
	box-shadow: 1px  1px 1px rgba(255,255,255,0.5) inset,
	            0    4px 0   #d7d7d7, /* gives the "elevation" to the button */
		        0    5px 0   #bebebe,
		        0    5px 5px #c4c4c4,
		        5px 15px 5px rgba(0,0,0,0.05); /* for the directional shadow  */
	
	/* css3 vendor-specific transition property */
	-webkit-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
	   -moz-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
	     -o-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
	    -ms-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
	        transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
}
.chunky_button:hover { 
	cursor:pointer; 
	box-shadow: 1px 1px 10px rgba(255,255,255,0.9) inset,
				0    4px 0   #d7d7d7,
				0    5px 0   #bebebe,
				0    5px 5px #c4c4c4,
				5px 15px 5px rgba(0,0,0,0.05);
}
.chunky_button:active {
	top:5px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.1) inset;
}

The CSS – Explained

Basic Styling

.chunky_button {
	border: 1px solid #d1d1d1;
	color: #818181;
	text-shadow: 0 1px 0 #fff;
	padding: 15px;
	font-weight:bold;
	font-size:16px;
	border-radius:10px;
}

These are basic styling rules that don’t call for explanation I suppose. So let’s move on to more interesting stuff.

.chunky_button {
	position:relative; /* positions the element relative to its parent. */
	top:0; 
}

The “position: relative” sets the element’s position relative to its parent. And the “top:0” places the element 0 units from the parent’s top. Why do we do this? We will see that at the end of this article.

CSS3 Gradients

Lets apply a subtle CSS3 linear gradient to our element.

.chunky_button {
	/* css3 vendor-specific gradients */
	background-color: #f0f0f0;/* fallback */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), to(#e6e6e6)); /* Safari 4-5, Chrome 1-9 */
	background-image: -webkit-linear-gradient(top, #f3f3f3, #e6e6e6); /* Safari 5.1, Chrome 10+ */
	background-image:    -moz-linear-gradient(top, #f3f3f3, #e6e6e6); /* Firefox 3.6+ */
	background-image:     -ms-linear-gradient(top, #f3f3f3, #e6e6e6); /* IE 10 */
	background-image:      -o-linear-gradient(top, #f3f3f3, #e6e6e6); /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, #f3f3f3, #e6e6e6); /* according to current CSS3 specification  */
}

I know. Prefixes suck big time. But hey! The beautiful possibilities and the current cross-browser-ish ability out-weight the extra bits of characters, right? Well, may be not. But its just a matter of time before they are pulled down and then its back the good ol’ one-liners.

CSS3 Shadows

.chunky_button {
	box-shadow: 1px  1px 1px rgba(255,255,255,0.5) inset, /* inner-shadow */
		        0    4px 0   #d7d7d7, /* gives the "elevation" to the button */
		        0    5px 0   #bebebe,
		        0    5px 5px #c4c4c4,
		        5px 15px 5px rgba(0,0,0,0.05); /* for the directional shadow  */
}

The “box-shadow: 0 4px 0 #d7d7d7” offsets the solid (blur value=0) shadow by 4px downwards and gives an illusion of elevation to the button.

CSS3 Transitions

Transitions allow us to animate CSS properties or rather to transit CSS properties from one value to another for the specified amount of transit time.

.chunky_button {
	/* css3 vendor-specific transition property */
    -webkit-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
       -moz-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
         -o-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
        -ms-transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
            transition: box-shadow 0.1s ease-in, top 0.1s ease-in ;
}

Transitions have to be declared within the same selector in which we are declaring the CSS properties. This is like telling the browser, “Hey! Am goin to specify another value for this property. So be ready to run the transition for the amount of time I specify. Alrite?”

CSS3 :active pseudo-class

Quoting from W3C: “The :active pseudo-class applies while an element is being activated by the user.”
In other words, most commonly, the :active pseudo-class applies between the times the user presses the mouse button and releases it.

So, we shall animate the button when it is active (the time duration between when it is pressed and when it is released) using the :active pseudo-class.

.chunky_button:active {
	top:5px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.1) inset;
}

Remember we set “position:relative” and “top:0”? We are now moving the element 5px down (relative to the top of the parent) when it is active. In addition to that, we are also transitioning the “box-shadow” values. We have unset all the offset shadow values. Hence the solid offset shadow (elevation) will be removed in a duration of 0.1s that we have specified. This, in combination with the “top:5px” transition (downward movement), will give us a nice animated button.