• Making a CSS Button

  Date: Jun 22, 2010  |  Categories: Css  |  Written By: Mike Ballan  

So you want to make a nice looking button that doesnt mean you have to make loads of different images and as i always seem to find you will always get somebody ask that a buttons text is changed to something longer or shorter than you have made your button.

All you need to do is set up this little bit of CSS and you too can have a nice button like the one above. First you are going to have to make your own graphics for the button but you can download my button images if you wish.

Next add this to the CSS of your site.

a.btn-black {
 	background:transparent url('btn_right.png') no-repeat scroll top right;
 	display:block;
 	float:left;
 	padding:0 10px 0 0;
 	color:#FFF;
}

a.btn-black span {
 	background:transparent url('btn_left.png') no-repeat;
 	display:block;
 	padding:10px 10px 10px 15px;
 	height:19px;
}

Last you will need to add this code for your button.

<a href="#" class="btn-black"><span>I am a cool shiny button..!</span></a>

And thats all you need to get a 100% awesome button..!