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

【问题标题】：How do I link a custom CSS designed button (class) using <input>?如何使用 <input> 链接自定义 CSS 设计的按钮（类）？
【发布时间】：2012-10-13 19:22:48
【问题描述】：

我目前在这个问题上不知所措。我正在做的是一个所见即所得的编辑器（很像我现在使用的那个），问题是顶部的按钮。我已经为他们的布局制作了一个 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> 等）都会使原始设计变形，使其具有 3 维外观，并且通常使其看起来更像按钮。

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

图片：

【问题讨论】：

标签： html css class button hyperlink

【解决方案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;
}

【讨论】：

如果你真的想为一个 URL 提供一个自定义按钮，那么它会非常有效。不幸的是，使用 . 时 JavaScript (onClick) 将无法工作
我通常使用JS来停止的默认动作，然后从标签中取出一个data-attribute来执行onclick动作。这样，如果用户没有打开 JS，链接仍然会存在并且可以正常工作（如果你提前计划的话）。

【解决方案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。

【讨论】：