是否可以將文本放在HTML按鈕上的3D按鈕？

我想在我的網站上使用漂亮的3D按鈕圖像。然而，目前這種方式的工作方式是文字是圖像的一部分。是否可以將文本放在HTML按鈕上的3D按鈕？

所以，當我想要改變文本（或新建一個按鈕）時，這是一個10分鐘的編輯工作，而不是20秒的文本更改。

我見過幾個網站上有一個空白的文本按鈕。

真正的訣竅是使整個圖像可點擊。我已經能夠使圖像中的鏈接可見，但這是一個糟糕的用戶界面。用戶將期望在任何地方點擊該按鈕，如果不這樣做就會挫敗他們。

看起來他們正在用超鏈接包裝帶有圖像背景的.DIV標籤。

 
<Div (class w/ image> 
<a> text 
</a>

例： https://www.box.net/signup/g

任何人有是如何工作的任何見解或解釋「？

代碼示例

<a href="#" class="button" style="position: relative;left:-5px;" 
    onmousedown="return false;" 
    onclick="document.forms['register_form'].submit(); return false;"> 
    <span> 
     My text 
    </span> 
</a>

來源

2008-12-11 Clay Nichols

或許像

a { 
    width: something ; 
    height: something; 
    display: block; 
    background: url('hi.png'); 
}

也

input { background: url('hi.png'); }

是一種替代

來源

2008-12-11 22:08:48 Jimmy

使按鈕背景圖片：

<style> 
div.button a { 
    display: block; 
    width: /* image width */; 
    line-height: /* image height */; 
    text-align: center; 
    background: url(/* image uri */) no-repeat; 
} 
</style>

來源

2008-12-11 22:09:41 flussence

將設置您的錨顯示：塊，並給它一個高度/寬度等於你的div /背景圖像幫助你？

來源

2008-12-11 22:09:42

你的例子只是把CSS樣式的標籤......

從那裏：

標籤：

<a onclick="document.forms['register_form'].submit(); return false;" 
    onmousedown="return false;" style="position: relative; left: -5px;" 
    class="button" href="#"> 
    <span>Continue</span> 
</a>

注意，他們正在使用JS出於某種原因，並不使用href，我不喜歡那樣。

然後，按鈕類：

a.button 
{ 
    background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top; 
    font-size:16px; 
    height:42px; 
    line-height:42px; 
    width:155px; 
}

這是你鏈接到該網站只是如何做的。

來源

2008-12-11 22:11:56 FlySwat

我發現this比較令人印象深刻。使用GWT來設置超鏈接的樣式。

來源

2009-02-23 23:08:42 fredarin

是否可以將文本放在HTML按鈕上的3D按鈕？

回答

相關問題