是否可以将文本放在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按钮？

回答

相关问题