<style type="text/css">
/* 通常時 */
a.button3d {
font-weight:bold;
border:1px solid #999;
border-right-color:#333;
border-bottom-color:#333;
color:#333;
width:auto;
text-decoration:none;
float:left;
margin-right:10px;
}
/* マウスオーバー時 */
a.button3d:hover {
border:1px solid #333;
border-right-color:#999;
border-bottom-color:#999;
color:#333;
}
/* 通常時のspan要素 */
a.button3d span {
background:#d4d0c8 url(/content/img/css/bg_3d_effect_button.gif) repeat-x 0 0;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777;
}
/* マウスオーバー時のspan要素 */
a.button3d:hover span {
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(/content/img/css/bg_3d_effect_button_over.gif) repeat-x 0 0;
cursor:pointer;
}
</style>
<a href="#" class="button3d"><span>Roll over here</span></a>
<a href="#" class="button3d"><span>Roll over here</span></a>
<a href="#" class="button3d"><span>Roll over here</span></a>
<br clear="all" />