如何使用<input />链接自定义CSS设计按钮（类）？

Question

我目前对此问题感到茫然。我正在制作的是一个WYSIWYG编辑器（很像我现在使用的编辑器），问题是顶部的按钮。我已经制作了一个CSS类的布局：

.test {
    background-color:#d0d0d0;
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none;
}

.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}

布局工作正常但我无法找到链接课程的正确方法。以此为例（忽略JavaScript）：

<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">

问题是任何按钮（<button>，<type="submit>等）都会使原始设计变形，使其具有三维外观并且通常使其看起来更像一个按钮。

我的问题是，我该如何解决这个问题？我试图用几种不同的方式链接这个类，但它不会起作用。

图片：

Answer 1

我通常会选择：

HTML：

<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>

的CSS：

.test {

    [ ... snipped your style ... ]

    position: relative;
}

.test a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

Answer 2

稍微调整了你的CSS

.test{
    background-color:#d0d0d0;
    border: 1px solid #f5f5f5;  //<--add this
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none; 
}
.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}​

适用于输入或按钮元素 这是结果的FIDDLE。