用於按鈕樣式的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鏈接

回答

相關問題