试图找到一个结合了精灵和滑动门技术的css翻转的示例。
我不是css识字的人，所以不胜枚举完整的示例或指向完整示例的链接。
我要做的就是使<a href>按钮的宽度不是固定的，具有很好的翻转效果，并且可以添加图标（类似于Web Outlook）。
最佳答案
以下内容基于本文（http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/），但适用于与标签一起使用。
它与@xijo的答案类似，但有一些细微的调整。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<title>Test</title>
<style type="text/css">
/* REQUIRED BUTTON STYLES: */
a {
border: 0;
padding: 0;
display:inline-block;
}
a span {
display: block;
white-space: nowrap;
cursor: hand;
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
a.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font-size:2em;
text-align: center;
background: transparent url(btn_blue_sprite.gif) no-repeat right -140px;
}
a.submitBtn span {
padding: 13px 0 0 15px;
height:37px;
background: transparent url(btn_blue_sprite.gif) no-repeat left top;
color:#fff;
}
a.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
a.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
</style>
</head>
<body>
This is a bunch <a href="#" class="submitBtn"><span>Submit</span></a> of text.
</body>
</html>