/* 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 */
	}

/* HTML: <a href="####" class="clickOrder"><span>Click here to order</span></a> */

#introBox .clickOrder {
	background: url(../images/blueButtoneLeft.gif) top left 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 */
	}

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.

Button Sliding Doors

css, button

CSS