无延迟翻滚的图形/CSS混合风格的按钮

一个使用过程的范例

这里是一个代码范例，范例的无预先载入的翻滚技术应用于图形/CSS混合按钮。在这种情况下，按钮文本以无顺序列表而标记，三个外形美观的按钮包含在具有ID menu的div中。首先，CCS为：

div#menu {
height: auto;
width: 150px;
}
div#menuli {
height: 30px;
width: 100px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 30px;
list-style-type: none;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menuli a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #FFFFFF;
}
div#menulia:link {
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:visited {
color: #CCCCCC;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:hover {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -30px;
}
div#menulia:active {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -60px;
}

这里是这三个按钮的HTML：

<div id="menu">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>

在以上代码中，请注意到 div#menu li 规则指定了按钮的高度和尺寸。指定 line-height 以匹配按钮的高度，以确保文本能垂直地放置在中央。 background-position 属性控制着背景图像的左上角的位置。

在 div#menu li 规则中，与 width: 100% 和 height: 100% 联合在一起的 display: block 属性，能够使得按钮框内而不只是文本被点击。

最后，在独立按钮状态规则中，比如 div#menu lia:link ， color 和 font-weight 属性建立了文本翻滚效果，同样 background-image 和 background-position 也为背景图像实现了相同的功能。将悬浮状态设置为 background-position: 0px -30px 能够让背景图像增加到30象素，以致于顶端按钮外表被隐藏。同样，将激活状态设置为 background-position: 0px -60px ，可以将背景图像象素提高得更多。 background-image 需要在每一规则中不断地重复。

这一技术能够让你获得具有传统图形按钮的三维效果，并具有快速的CSS文本风格的混合按钮。同样，这一技术能够让你实现无延迟或者无图像预先载入的图形翻滚效果。