使用滑動門技術實現圓角按鈕，如圖所示，背景圖和效果圖。
所謂滑動門，就是當按鈕的狀態改變時，移動背景圖，顯示不同的狀態。此法簡單有效，但缺點是不能縱向擴展。要處理縱向擴展，就要使用復雜的圓解技術，如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屬性都是可繼承的，所以不用重復再寫。