Posted By

1man on 05/13/09

Tagged

css
button

Versions (?)

Last Edited at 05/13/09 11:19am

Statistics

Viewed 1002 times

Favorited by 1 user(s)

Related snippets

Button Sliding Doors

/ Published in: CSS

Finally got round going through a sliding door example myself. All fairly straightforward apart from a few IE6 issues (who would have guessed!).

The button is floated so you may need to add overflow: hidden to it's container.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* HTML: <a href="####" class="clickOrder"><span>Click here to order</span></a> */
 
#introBox .clickOrder {
	background: url(../images/blueButtoneLeft.gif) no-repeat;/* Long image */
	padding: 14px 0 14px 35px;/* Adjust padding depending on height */
	float: left;/* Very important for IE6*/
 
	/* Below for decoration */
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	margin: 0 0 20px 20px;
	}
#introBox .clickOrder span {
	background: url(../images/blueButtoneRight.gif) top right no-repeat;/* Overlap Image */
	padding: 12px 26px 14px 0;/* Padding to show the overlap image on the right */
	}