Kathirvel K

Resizable Buttons

Posted on: April 21, 2009


//CSS
button{border:none;background:none;padding:0;margin:0; width:auto;overflow:visible;text-align:center;white-space:nowrap;height:40px;line-height:38px;}
button span, button em{display:block;height:40px;line-height:38px;margin:0;color:#954b05;}
button span{padding-left:20px;background:url(bg_button.gif) no-repeat 0 0;}
button em{font-style:normal;padding-right:20px;background:url(bg_button.gif) no-repeat 100% 0;}

//HTML

<button><span><em>My button</em></span></button>

//Note: background image should be gif format and non-transparent

Advertisements
Tags:

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

%d bloggers like this: