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,

Like this post? Share it!

Related posts:

1. Tutorial: How to create an image navigation bar with CSS A simple yet powerful technique used mostly on navigation bar...
2. Tutorial: Simple Cross-browser tooltip with CSS This article illustrate how tooltip can be done with only...
3. Tutorial: How to vertical align center on the screen while scrolling with CSS This is just to show you how to make an...
4. Tutorial: How To Create a Simple Customize Wordpress Theme A tutorial request by looli to create a simple customize...

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.