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

时间:2008-12-11 22:05:47

标签: html css

我想在我的网站上使用漂亮的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>

5 个答案:

答案 0 :(得分:4)

将按钮设为背景图像:

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

答案 1 :(得分:0)

或许类似

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

另外,

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

是另一种选择

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

豫ICP备18024241号-1