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

div.morec{
background:url(back-button_left.gif) left no-repeat;
padding-left: 14px;
height:22px;
}

div.morec span.mores{
background:url(back-button_right.gif) right no-repeat;
padding-right: 14px;
width:auto;
font-size:10px;
height:22px;
display:inline-block;
line-height:20px;
}

div.morec span.mores a:link,div.morec span.mores a:visited{
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
}
div.morec span.mores a:hover{
text-decoration:none;
color:#F3901D;
}

Here are the html codes

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

Thats it.

Advertisements
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s