用于按钮样式的CSS链接

我试图创建此按钮而实际上不使用按钮标签。我创建了一个按钮图像，并将它切分为左右中间的三个部分，所以当我向链接添加文本时，图像将根据长度展开。我也在使用悬停图像 - 但是当我尝试将此样式应用于按钮标记时 - 此功能无效 - 不确定这是因为按钮标记没有悬停功能。但是，当我把这三张图片放在一个列表格式中时，它很好地显示了'按钮'的悬停和非悬停图像，但是它并没有在所有网页浏览器上正确显示。用于按钮样式的CSS链接

这里是列表格式样式：

<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; 
}

任何建议或替代什么，我试图做的，将不胜感激。谢谢！

来源

2012-08-13 Masriyah

国际海事组织，使用所有这个标记作为按钮它现在在顶部。只能使用''和CSS来制作漂亮的按钮。例如：http：//www.websitefacility.co.uk/blog/？p = 93 – 2012-08-13 13:21:17

@EduardoMolteni这将需要一个固定的？我希望宽度是自动的，取决于放置在按钮上的文字。 – Masriyah 2012-08-13 13:23:42

除非我误解了你的问题，否则你并不需要三个部分来获得“扩展按钮”。保持宽度不变，你会自动获得。看看：http://jsfiddle.net/HrCR8/3/

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

来源

2012-08-13 13:23:31 banzomaikaka

这看起来像我想要的，但在我试图在IE 9中显示它的按钮颜色消失，背景颜色是白色的。 – Masriyah 2012-08-13 13:26:44

好吧，那只是因为我忽略了IE的css前缀，假设你会在mozilla或chrome上查看它。让我更新它。我会回来评论。 – banzomaikaka 2012-08-13 13:28:33

立即试试看：http://jsfiddle.net/HrCR8/3/ – banzomaikaka 2012-08-13 13:30:43

尝试将悬停样式基于li元素。

li:hover a{ 
    //link hover styling 
} 

li:hover button{ 
    //button hover styling 
}

来源

2012-08-13 13:22:55 Asciiom

用于按钮样式的CSS链接

回答

相关问题