如何將一個按鈕變換成這個樣式的按鈕

我正在嘗試使按鈕看起來像我想要的。我設法做到了這一點，但問題是，要求我使用javascript發佈表格，這是打破這個網站的完全可訪問性。如何將一個按鈕變換成這個樣式的按鈕

所以，我想知道我可以用<input type"submit" />同時保持上的所有按鈕的鼠標懸停效果獲得相同的效果，而不是純文本（我的第一個解決了這個問題）。

這裏是如何看的按鈕（你也可以看到鼠標的效果）：

Button styled with mouseover effect

在這裏你可以找到一個小提琴：http://jsfiddle.net/FireDragonDoL/hjC7P/

這裏是代碼：

HTML

<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div class="nothing"> 
     <div class="button"><span><span>Leggi tutto</span></span></div><br /><br /> 
    </div> 
    <div class="container"> 
     <div class="button"><span><span>Leggi tutto</span></span></div><br /><br /> 
    </div> 
    </body> 
</html>

CSS

* { 
    outline:none; 
    border:0; 
} 
body { 
    margin:0; 
    font-family:Georgia, "Times New Roman", Times, serif; 
} 
a { 
    color:#750e0e; 
    text-decoration:none; 
} 
a.reverse-color { 
    color: #D6D6B0; 
    text-decoration: none; 
} 
.container .button { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent; 
} 
.container .button span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent; 
} 
.button { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 1px 0 transparent; 
    border: 0 none; 
    cursor: pointer; 
    height: 60px; 
    margin: 0; 
    overflow: visible; 
    padding: 0 0 0 15px; 
    width: auto; 
    float:right 
} 
.button span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 100% 0 transparent; 
    color: #750E0E; 
    float: left; 
    font-size: 14px; 
    font-weight: bold; 
    height: 60px; 
    text-align: center; 
    text-shadow: 0 1px #D7E9A4 !important; 
    white-space: nowrap; 
    text-shadow:1px 1px #FFFFFF; 
} 
.button:hover span { 
    color:#333; 
} 
.button span span { 
    line-height: 52px; 
    padding: 0 20px 0 0; 
} 
.button:hover { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent; 
} 
.button:hover span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent; 
} 
.container, .nothing { 
    clear: both; 
    overflow:hidden; 
    padding:10px 0; 
}

唯一的想法，我有實際使用按鈕背景的大圖像，（更廣泛的，可能的），並使用<input type="image" />，但在這種情況下，我不知道如何在圖片上放置文字。

任何建議讚賞

來源

2013-01-07 Fire-Dragon-DoL

目前，沒有辦法通過一個單一的html元素來做到這一點。可能用:before和:after也可以做些事情，或者用position: relative。

此刻，我會堅持使用javascript代碼將這些項目轉換爲「提交」按鈕。

來源

2013-01-24 13:12:32

這是可能的，但與不同的瀏覽器的問題。簡單的方法是包括您的文字與圖像。並將精靈技術用於懸停效果。

來源

2013-01-07 07:24:53

我以爲這只是一個錯誤，我自己在css中缺少足夠的技能......我可以堅持使用javascript，但如果是這樣的話。但是我不想將文本**放在**圖像中，因爲我有很多按鈕。 –

好的。你可以做到這一點，但你已經寫了一些額外的代碼，因爲所有的瀏覽器位置都不相同。如果你想IE瀏覽器的某些功能檢測，那麼這裏是非常好的網站鏈接：http://www.quirksmode.org/css/condcom.html –

是的，我將與它合作，但我不知道如何通過css和一個輸入標籤來實現這個結果。 –

如何將一個按鈕變換成這個樣式的按鈕

回答

相關問題