按钮样式链接的 CSS

Question

我试图在不实际使用按钮标签的情况下创建此按钮。我创建了一个按钮图像并将其切成左中右三部分，因此当我向链接添加文本时，图像将根据长度扩展。我还使用悬停图像 - 但是当我尝试将此样式应用于按钮标签时 - 上方功能不起作用 - 不确定这是否是因为按钮标签没有悬停功能。但是，当我将这三幅图像以列表格式放置时，它可以很好地显示“按钮”的悬停和非悬停图像，但它无法在所有网络浏览器上正确显示。

这是列表格式样式:

<ul class="glossyBtn">
    <li class="newBtn">
        <a style="margin-left: 12px"class="printRemove" href='<%:Url.Action("Close", "Close", new{caseId = Model.CaseId}) %>'><b><b class="bodyBtn">Close</b></b></a>
    </li>
</ul>

这是具有按钮标签但未应用悬停 CSS 时的样式。

   <ul class="glossyBtn">
   <li class="newBtn">
      <button class="noStyle" type="submit" value="save"> <a>
      <b><b class="bodyBtn">Save</b></b></a></button>
   </li>
</ul>

这是 CSS:

.glossyBtn
{
    position: relative;
    padding: 5px 0 0 6px;
    margin: 0 auto 0 auto;
    height: 24px;
    float: left;

    list-style: none;
}
.glossyBtn li
{
    float: left;
}
.glossyBtn li a, .glossyBtn li button, .glossyBtn li input a  {
    float: left;
    color: #046fad;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    padding: 0 0 0 6px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    border-bottom: none;
}

.glossyBtn li a b, .glossyBtn li input a b {
    height: 24px;
    display: block;
    padding: 0 8px 0 8px;
}
.glossyBtn li a b.bodyBtn, .glossyBtn li input a b.bodyBtn
{
    height: 24px;
    display: block;

}
.glossyBtn li.newBtn a, .glossyBtn li.newBtn input a
{
    color: #046fad;
    background: url('images/iconPlace.png') no-repeat 0 0;
}
.glossyBtn li.newBtn a b, .glossyBtn li.newBtn input a b {
    color: #046fad;
    background: url('images/endBtn.png') no-repeat right 0;
}
.glossyBtn li.newBtn a b.bodyBtn, .glossyBtn li.newBtn input a b.bodyBtn
{
    background: url('images/bodyBtn.png') repeat-x;
}
.glossyBtn li a:hover, .glossyBtn li button a:hover {
    background: url('images/iconPlace.png') no-repeat 0 -24px;
}
.glossyBtn li a:hover b, .glossyBtn li button a:hover b {
    background: url('images/endBtn.png') no-repeat right -24px;
}
.glossyBtn li a:hover b.bodyBtn, .glossyBtn li button a:hover b.bodyBtn
{
    background: url('images/bodyBtn.png') repeat-x 0 -24px;
}

任何对我正在尝试做的事情的建议或替代方案将不胜感激。谢谢!

Answer 1

除非我误解了您的问题，否则您实际上并不需要这三个部分来获得“扩展按钮”。不考虑宽度，您会自动得到它。看看:http://jsfiddle.net/HrCR8/3/

我应该将这个特殊的按钮归功于 Chad Mazzolla 和他用于创建按钮的样式集合。您可以在这里找到它们 http://hellohappy.org/css3-buttons/