CSS 按钮滑动门

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 按钮滑动门相关的知识,希望对你有一定的参考价值。

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

以上是关于CSS 按钮滑动门的主要内容,如果未能解决你的问题,请参考以下文章

滑动门按钮

按钮滑动门

HTML 具有图像和CSS的可重用框(实现滑动门的非语义变体)

夯实基础--CSS=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)

滑动门原理

电商网站滑动门特效