来自http://tunps.com/two-solid-css-buttons
、
第一个按钮
html代码：
<a class="button" href="#"><span>Button One</span></a> |
css代码
a.button{ float:left; font-size:110%; font-weight:bold; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; color:#333; width:auto; }a.button:hover{ border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #999; border-bottom:1px solid #999; color:#333; } a.button span{ background:#d4d0c8 url(images/bg_btn.gif) repeat-x; float:left; line-height:24px; height:24px; padding:0 10px; border-right:1px solid #777; border-bottom:1px solid #777; } a.button:hover span{ border:none; border-top:1px solid #777; border-left:1px solid #777; background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x; cursor:pointer; } |
第二个按钮
html代码：
<a class="button" href="#" onclick="this.blur();"><span>Button Two</span></a> |
css代码：
a.button { background: transparent url('images/bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none;}a.button span { background: transparent url('images/bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px;} a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */}a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */} |
这两个按钮的都用到了sliding door（滑动门）技术，第一个按钮通过border色彩的变化产生立体效果，第二个按钮通过图片位置的变换产生立体效果。第一个按钮有个bug,在IE8下面，:active效果没有反应。
下载：http://tunps.com/lab/css/solid-button.zip
