• Smooth scrolling background with CSS & JavaScript
• Great: Pure CSS rolling Coke Can
• Monster drawings from children painted by an artist
• Freefont “PT Sans” by Paratype
• And of course, something on the iPad – interesting read!

I’ll make some changes to my blog within the next days. The footer finally needs some content, a search field is still missing and the sidebar looks a bit empty by now. There are still a lot of things to do around here…

Update!

This example uses a small background gradient image to achieve the plastic look of the button. Click here for an updated version of the CSS buttons without any images at all.

The main CSS markup

.btn {
	display: inline-block;
	background: url(btn.bg.png) repeat-x 0px 0px;
	padding:5px 10px 6px 10px;
	font-weight:bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.4);
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

By using RGBa color values, the button and text shadows always blend well with any color we’ll add to our button later on. No matter if we want the button to be green, red or blue. The code above always stays the same.

Using the common hex-values, we would get a result similar to the one on the right when hovering the button.

Adding the color

.blue		{background-color: #CCCCCC; color: #141414;}
.blue:hover	{background-color: #00c0ff; color: #ffffff;}

.green		{background-color: #CCCCCC; color: #141414;}
.green:hover	{background-color: #8aff00; color: #ffffff;}

.red		{background-color: #CCCCCC; color: #141414;}
.red:hover	{background-color: #ff004e; color: #ffffff;}

This is where we define the different color variations. All we need to change is the text- and background color along with the mouseover/hover values. To change the color of a button, just attach the corresponding class to the main button class.

Click here for a live demo.