Question

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

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

我希望两个人看起来和行为一样。没什么好看的，只是类似于“Ask Question”锚点在StackOverflow上看起来的样子。

我可以让两个看起来有点相似，包括边界框，背景颜色和悬停背景颜色，但我不能完全达到高度和垂直对齐方式。我发布了我的CSS但是现在这样一团糟，我认为从头开始可能更容易，让准系统的CSS布局工作，然后从那里开始。

P.S。我知道我可以使用an而不是锚点并挂钩onClick事件来进行重定向。现在，使用锚点来解决这个问题几乎是一个原则问题（此外还要考虑网络蜘蛛的考虑因素）。

Answer 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>

Answer 2

我希望这会有所帮助。

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

Answer 3

我建议您使用输入提交/按钮而不是锚点，并将此行代码onClick="javascript:location.href = 'http://stackoverflow.com';"放在您想要用作链接的输入提交/按钮中。

提交示例

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

按钮示例

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

Answer 4

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

标记：

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

css：

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

Answer 5

使用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>

Answer 6

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

<button>Cancel</button>

或者也许是输入：

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

Answer 7

为什么不使用按钮并使用JavaScript调用网址？

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

Answer 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

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();
}

Answer 10

怎么样

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

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

10 个答案: