Tutorial: How to add button image to a link with css

I got an image from the tutorial i wrote previous and wanted to do some simple stuff like adding it to a link so i did the following css code:

a.button {
display: block; 					/* this make it possible to hook the image to the link */
background-color: transparent;
background-image: url(mybutton.png); /*set the button image */
background-repeat: no-repeat;		/*set it once only */
width: 150px;						/*width of the image*/
height: 65px;						/*height of the image*/
margin: 5px auto;					/*align the text to center with top and bottom 5px margin*/
padding: 15px 0 0 0;				/*add a padding of 15px to the top*/
text-align: center;					/*this is required to make it align to center but we usually place this on the body instead*/
font-family: Myriad Pro, Calibri, Arial, sans-serif;/*font of the image*/
font-size: 100%;									/*font size*/
color: #FFF;										/*font color*/
font-weight: bold;									/*font style*/
text-decoration: none;								/*remove the link decoration*/
}

The code is well commented for understanding and you can find the sample code from here here. You will get something like this in HTML,