![](http://www.cppblog.com/images/cppblog_com/biao/round_button.png)
![](http://www.cppblog.com/images/cppblog_com/biao/button_effect.png)
使用滑动门技术实现圆角按钮,如图所示,背景图和效果图。
所谓滑动门,就是当按钮的状态改变时,移动背景图,显示不同的状态。此法简单有效,但缺点是不能纵向扩展。要处理纵向扩展,就要使用复杂的圆解技术,如4个圆角图片,四个边的图片加上中间的图片一共9张图来实现。
<html>
<head>
<style type='text/css'>
body {
font-size: 23px;
}
.button {
cursor: default;
font-size: 15px;
background: url(button.png) no-repeat top right;
display: inline-block; /* inline element has layout */
/* float: right;*/ /* Can also be not float. */
height: 24px; /* height of the background image */
padding-right: 15px;
white-space:nowrap; /* Don't wrap line */
line-height: 24px; /* Vertically centralize the text */
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
}
.button .inner {
background: url(button.png) no-repeat top left;
display: inline-block;
height: 24px;
white-space:nowrap;
line-height: 24px;
padding-left: 15px;
}
span.button:hover {
text-shadow: 0px 0px 5px #999;
}
span.button:hover span {
}
span.button:active {
text-shadow: 0px 0px 5px #333;
background-position: right bottom;
}
span.button:active span.inner {
background-position: left bottom;
}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<span class="button"><span class="inner">The text of the button is very long</span></span>
</body>
</html>
不使用a来做按钮,是因为前不久在php中遇到<a href="#">xxxx</a>,点击此链接,会刷新本页,最后只好使用了span来做按钮了,效果是一样的,只不过a的鼠标会自动是手势罢了,上面的文字不可选择。
为了防止选中文字:
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
为了防止按钮中的文字换行:
white-space:nowrap; /* Don't wrap line */
HTML中的元素,要么是inline的(可与其他inline元素在同一行),要么是block的(独占一行),所以为了让按钮能与其他元素在同一行,还要具有block元素才有的layout功能,使用了
display: inline-block;
让按钮上的文字居中,最好的办法是使用 line-height,让其与按钮的背景图一样高:
line-height: 24px;
由于上面使用到的一些CSS属性都是可继承的,所以不用重复再写。