Rounded corner background image with text link

Today it was needed to make dynamic text links with rounded corner background. It is little tricky, first i tried to create it using div but div is a block elements so it needs fixed width. But it was a text link and dynamic, so width may vary, also background image is rounded corner. Then i tried it suing span, but span is not block element and doesn’t has height property, later i’ve applied inline-block property to that span and then height is applicable to span.

First i’ve splitted the background image to two parts, with few pixels of the left part of image, create first part of the image and with the rest of the part, the second part of the image. Get the images form here –

Here are the css styles

background:url(back-button_left.gif) left no-repeat;
padding-left: 14px;

div.morec span.mores{
background:url(back-button_right.gif) right no-repeat;
padding-right: 14px;

div.morec span.mores a:link,div.morec span.mores a:visited{
font-family:Arial, Helvetica, sans-serif;
div.morec span.mores a:hover{

Here are the html codes

<div><span><a href=”#”>Other effects the example I ran through</a></span></div>

Thats it.

This entry was posted in Uncategorized. Bookmark the permalink.

One thought on “Rounded corner background image with text link

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.