Question

我想在我的网站上使用漂亮的3D按钮图像。但是，目前的工作方式是文本是图像的一部分。

因此，当我想要更改文本（或创建一个新按钮）时，这是一个10分钟的编辑工作，而不是20秒的文本更改。

我看过一些网站上有一个带有文字的空白按钮。

真正的诀窍是使整个图像可以点击。我已经能够使图像中的链接可见，但这是一个糟糕的UI。用户希望在任何地方点击该按钮，如果不这样做会使他们感到沮丧。

看起来他们正在包装一个带有超链接周围图像背景的.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>

Answer 1

将按钮设为背景图像：

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

Answer 2

或许类似

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

另外，

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

是另一种选择

Answer 3

将你的锚设置为显示：阻止并给它一个等于你的div /背景图像的高度/宽度对你有帮助吗？

Answer 4

您的示例只是将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;
}

这就是你链接的网站是如何做到的。

Answer 5

我发现this令人印象深刻。使用GWT设置超链接样式。

是否可以在HTML中将文本放在3d按钮上？

5 个答案: