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!
No related posts.
