一個使用過程的范例

這里是一個代碼范例，范例的無預先載入的翻滾技術應用于圖形/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文本風格的混合按鈕。同樣，這一技術能夠讓你實現無延遲或者無圖像預先載入的圖形翻滾效果。