按钮滑动门

Posted 2021-02-26

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.

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