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

【问题标题】：Is it possible to put text on 3d button in HTML?是否可以将文本放在 HTML 中的 3d 按钮上？
【发布时间】：2010-09-26 13:05:39
【问题描述】：

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

所以，当我想更改文本（或制作新按钮）时，需要 10 分钟的编辑工作，而不是 20 秒的文本更改。

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

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

似乎他们在超链接周围包裹了一个带有图像背景的 .DIV 标签。

文本

示例： 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>

【问题讨论】：

标签： html css

【解决方案1】：

将按钮设为背景图片：

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

【讨论】：

【解决方案2】：

将您的锚设置为 display:block 并为其设置与您的 div/背景图像相等的高度/宽度对您有帮助吗？

【讨论】：

【解决方案3】：

可能是这样的

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

还有，

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

是另一种选择

【讨论】：

【解决方案4】：

您的示例只是在 a 标签上放置 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;
}

这正是您链接到的那个网站的做法。

【讨论】：

【解决方案5】：

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

【讨论】：