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

I have a form where there's a "Submit" button and a "Cancel" anchor. The HTML is this:

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

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

I'd like for the two to look and act the same. Nothing fancy, just something similar to how the "Ask Question" anchor looks on *.

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

I can get the two to look somewhat similar, with the bounding box, background color, and hover background color, but I can't quite get the height and vertical alignment to play nice with one another. I'd post my CSS but it's such a mess at this point that I think it might be easier to just start from scratch, get a barebones CSS layout working, then move on from there.

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

P.S. I know I could use an instead of an anchor and hook up the onClick event to do the redirect. It's almost a matter of principle at this point now to get this right using an anchor (plus there are web spider considerations to take into consideration here).

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

10 个解决方案

#1

The best you can get with simple styles would be something like:

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

.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;
}

(Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being ‘active’.)

（可能有某种修复方法可以阻止IE6-IE7将聚焦按钮视为“活动”。）

This won't necessarily look exactly like the buttons on the native desktop, though; indeed, for many desktop themes it won't be possible to reproduce the look of a button in simple CSS.

但这不一定与原生桌面上的按钮完全相同;实际上，对于许多桌面主题，不可能在简单的CSS中重现按钮的外观。

However, you can ask the browser to use native rendering, which is best of all:

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

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

Unfortunately, as you may have guessed from the browser-specific prefixes, this is a CSS3 feature that isn't suppoorted everywhere yet. In particular IE and Opera will ignore it. But if you include the other styles as backup, the browsers that do support appearance drop that property, preferring the explicit backgrounds and borders!

不幸的是，正如您可能已经从浏览器特定的前缀中猜到的那样，这是一个CSS3功能，但并未在任何地方支持。特别是IE和Opera会忽略它。但是，如果您将其他样式作为备份包含在内，那么支持外观的浏览器会删除该属性，而更喜欢显式背景和边框！

What you might do is use the appearance styles as above by default, and do JavaScript fixups as necessary, eg.:

你可能会做的是默认使用上面的外观样式，并根据需要进行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>

#2

I hope this will help.

我希望这将有所帮助。

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

#3

I Suggest you to use both Input Submit / Button instead of anchor and put this line of code onClick="javascript:location.href = 'http://*.com';" in that Input Submit / Button which you want to work as link.

我建议你使用输入提交/按钮而不是锚，并将这行代码放在onClick =“javascript：location.href ='http://*.com';”在您要作为链接工作的输入提交/按钮中。

Submit Example

提交示例

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

Button Example

按钮示例

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

#4

Using a button tag instead of the input, resetting it and put a span inside, you'll then just have to style both the link and the span in the same way. It involve extra markup, but it worked for me.

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

the markup:

标记：

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

the css:

css：

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

#5

Links and inputs are very different things, used for very different purposes. Looks to me like you need a button for the cancel:

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

<button>Cancel</button>

Or maybe an input:

或者输入：

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

#6

Why not just use a button and call the url with JavaScript?

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

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

#7

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

#8

Using CSS:

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

#9

-1

Style your change the Submit button to an anchor tag instead and submit using javascript:

将您的更改“提交”按钮设置为锚标记，然后使用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

-3

How about

怎么样

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

#1