将锚标记设置为看起来像提交按钮答案

【问题标题】：Styling an anchor tag to look like a submit button将锚标记设置为看起来像提交按钮
【发布时间】：2011-01-12 07:42:29
【问题描述】：

我有一个表单，其中有一个“提交”按钮和一个“取消”锚点。 HTML 是这样的：

<input type="submit" value="Submit" />
<a href="some_url">Cancel</a>

我希望两者的外观和行为相同。没什么特别的，只是类似于 StackOverflow 上的 "" 锚点。

我可以让两者看起来有些相似，包括边界框、背景颜色和悬停背景颜色，但我不能完全让高度和垂直对齐方式相互配合。我会发布我的 CSS，但此时它太乱了，我认为从头开始，让准系统 CSS 布局正常工作，然后从那里继续前进可能会更容易。

附：我知道我可以使用 an 而不是锚并连接 onClick 事件来进行重定向。在这一点上，使用锚点来解决这个问题几乎是一个原则问题（此外，这里还需要考虑网络蜘蛛的注意事项）。

【问题讨论】：

无法很好地调整高度和垂直对齐方式它看起来如何？它应该是什么样子？
我希望它们看起来一样。问题是锚标记的高度往往与所有浏览器中的提交按钮的高度不匹配。要么这样，要么并排放置时它们不能完美对齐。
为了清楚起见，两者都应该看起来像 StackOverflow 右上角的“”按钮。这不完全是我想要的，但它足够接近可以用作参考点。
如果你想让东西看起来一样，网络蜘蛛的考虑和原则怎么可能迫使你不使用相同的元素？
@Hanan 因为网络蜘蛛没有启用 javascript，所以如果我将锚点变成按钮，它们将永远不会点击“取消”页面。

标签： html css

【解决方案1】：

使用简单样式可以获得的最佳效果如下：

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

（可能通过某种修复来阻止 IE6-IE7 将焦点按钮视为“活动”。）

不过，这不一定与本机桌面上的按钮完全一样；事实上，对于许多桌面主题，不可能用简单的 CSS 重现按钮的外观。

但是，您可以要求浏览器使用原生渲染，这是最好的：

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

不幸的是，正如您可能已经从特定于浏览器的前缀中猜到的那样，这是一个 CSS3 feature，目前还没有得到任何地方的支持。特别是 IE 和 Opera 会忽略它。但是，如果您包含其他样式作为备份，则支持 appearance 的浏览器会放弃该属性，而更喜欢显式的背景和边框！

您可能会默认使用上述appearance 样式，并根据需要进行JavaScript 修复，例如：

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

【讨论】：

接受的答案实际上是对 OP 问题的直接答案。但这个答案似乎更实用。

【解决方案2】：

我希望这会有所帮助。

<a href="url"><button>SomeText</button></a>

【讨论】：

stackoverflow.com/questions/802839/…
这甚至不是有效的 HTML。怎么会有 18 票？
在所有流行的浏览器中都可以在我的页面上使用，因此我对这个简单明了的解决方案感到满意。如果它对我的目的足够有效。
@scriptz 虽然它可以工作，但它被认为是无效的 HTML，迟早它可能不再工作。

【解决方案3】：

我建议您同时使用 Input Submit / Button 而不是锚点，并将这行代码 onClick="javascript:location.href = 'http://stackoverflow.com';" 放在您要用作链接的 Input Submit / Button 中。

提交示例

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />

按钮示例

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>

【讨论】：

【解决方案4】：

使用 CSS：

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

<a href="some_url" class="button ">Cancel</a>

【讨论】：

【解决方案5】：

使用按钮标签而不是输入，重置它并在其中放置一个跨度，然后您只需以相同的方式设置链接和跨度的样式。它涉及额外的标记，但它对我有用。

标记：

<button type="submit">
    <span>submit</span>
</button>
<a>cancel</a>

CSS：

button[type="submit"] {
    display: inline;
    border: none;
    padding: 0;
    background: none;
}

【讨论】：

【解决方案6】：

链接和输入是非常不同的东西，用于非常不同的目的。在我看来，您需要一个按钮来取消：

<button>Cancel</button>

或者也许是一个输入：

<input type="button" value="Cancel"/>

【讨论】：

这似乎不能满足原始发布者的问题，但其中任何一个都对我有用，对于我想附加 href="#target" 以进行引导折叠切换的按钮。（附件使用 .NET 代码隐藏完成，需要连接到 ListView 中的编号行）

【解决方案7】：

为什么不直接使用按钮并使用 JavaScript 调用 url？

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />

【讨论】：

网络蜘蛛不会在启用 javascript 的情况下进行浏览，因此它们永远不会点击取消 url。我想这没什么大不了的，我只是希望有一个可以与锚标签一起使用的解决方案。
这不是最干净的，但考虑到蜘蛛，您可以在按钮

【解决方案8】：

HTML

<a href="#" class="button"> HOME </a>

CSS

.button { 
         background-color: #00CCFF;
         padding: 8px 16px;
         display: inline-block;
         text-decoration: none;
         color: #FFFFFF;
         border-radius: 3px;
}
.button:hover{ background-color: #0066FF;}

Watch the tutorial

https://youtu.be/euti4HAJJfk

【讨论】：

这是一个七年前的帖子，您正在回复，而且您做得很差。你的标记有什么作用？它如何回答这个问题？不要只是脱口而出标记。解释你自己！ stackoverflow.com/help/how-to-answer

【解决方案9】：

将提交按钮改为锚标记并使用 javascript 提交：

<a class="link-button" href="javascript:submit();">Submit</a>
<a class="link-button" href="some_url">Cancel</a>

function submit() {
    var form = document.getElementById("form_id");
    form.submit();
}

【讨论】：

【解决方案10】：

怎么样

<a href="url"><input type="button" value="Cancel"></a>

【讨论】：