Adding Image to a link

An image can easily give the user a clue about what a particular element is, than a text with long sentences. You can attach images to a link that has special importance.

For example, we can denote the

mailto:

Let us see how to make that,

1) Creates a simple mailto: link

<p id="legal"><a href="mailto:balaji@bricksofweb.com">E-mail comments to balaji@bricksofweb.com</a></p>

Image may be NSFW.
Clik here to view.

2) Remove the underline and color the text

#legal a {
	text-decoration: none;
	color: #666;
	font-weight: bold;
}

Image may be NSFW.
Clik here to view.

3) Add Image in the background

#legal a {
	text-decoration: none;
	color: #666;
	font-weight: bold;
	background: url(email.gif) no-repeat left center;
}

Image may be NSFW.
Clik here to view.

Here, you are adding a background image with no repetition on the extreme left of the link and center on the y-axis.

4) Add some space to the left

#legal a {
	text-decoration: none;
	color: #666;
	font-weight: bold;
	background: url(email.gif) no-repeat left center;
	padding-left: 20px;
	margin-left: 10px;
}

Image may be NSFW.
Clik here to view.

Now, you can see in the above image that a link contains a background image attached to it.

The post Adding Image to a link appeared first on Bricks of Web.