Cool Pure CSS Buttons

September 21, 2011 2 Comments

So one of my work mate asked me how do we create buttons with CSS. I thought man! there are so many techniques that you can do it. So I am writing this post as a reference for him.

Before you use this technique let me tell you a couple of things

Technique will only work on HTML pages with white backgrounds.
If you want different colour buttons, just adjust hue/saturation of any button image provided within your Photoshop, but do not change the image or canvas size.

Lets take a look what final result will look like

And when I hover on Blue button this is what it will look like

Below is the code to achieve the above result

<html>
<head>
 
</head>
<body>
<style type="text/css">
a.button{
		cursor:pointer;
		line-height:27px;
		height:27px;
		padding-right:15px;
		font-family: tahoma, arial, verdana, "lucida sans unicode", sans-serif;
    	padding-left:0px;
		display:inline-block;
		text-decoration:none !important;
		font-weight:bold;
		color:#FFF;
		 }
 
a.greenbackright {background:url(green.jpg) no-repeat right top;}
span.greenbackleft {background:url(green.jpg) no-repeat left top;}
 
a.greybackright {background:url(grey.jpg) no-repeat right top;}
span.greybackleft {background:url(grey.jpg) no-repeat left top;}
 
a.bluebackright {background:url(blue.jpg) no-repeat right top;}
span.bluebackleft {background:url(blue.jpg) no-repeat left top;}
 
a.redbackright {background:url(red.jpg) no-repeat right top;}
span.redbackleft {background:url(red.jpg) no-repeat left top;}
 
a.button:hover {
		background-position:right -31px;
		text-decoration:none;
		font-weight:bold;
		color:#FFF;}
a.button span {
			height:27px;
			line-height:27px;
			display:inline-block;
			padding-left:15px;
			text-decoration:none !important; 
 
}
a.button:hover span{background-position:left -31px;
						text-decoration:none;
						font-weight:bold;
						color:#FFF;}
</style>
 
<a href="#" class="button greenbackright"><span class="greenbackleft ">Click me</span></a><br><br>
 
<a href="#" class="button greybackright"><span class="greybackleft ">Click me</span></a><br><br>
 
<a href="#" class="button bluebackright"><span class="bluebackleft ">Click me</span></a><br><br>
 
<a href="#" class="button redbackright"><span class="redbackleft ">Click me</span></a><br>
 
</body>
</html>

The images you can just download from below

I hope this helps. Leave your comments if you have any questions.

Cheers

Link to this article is below

<a href="http://jaspreetchahal.org/cool-pure-css-buttons/" >Cool Pure CSS Buttons</a>

Search Terms:

Jaspreet Chahal

Self-confessed Max Payne and Howzat Cricket game addict. Big fan of Dharmendra, Keanu reeves & Lawrence "Larry" Page. I love my Wife, my son and bit of geeky stuff. I started falling in love with Blog'in last year. Writing is tending out to be fun. I write on situation I was in thus my post always travel around web development stuff. I hope you enjoy my posts.