如何创建一个像链接一样的HTML按钮? [英]How to create an HTML button that acts like a link?

2024-02-02 19:09:22

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

我想创建一个像链接一样的HTML按钮。所以，当你点击按钮时，它会重定向到一个页面。我希望它尽可能的容易接近。

I would also like it so there aren't any extra characters, or parameters in the URL.

我也希望URL中没有任何额外的字符或参数。

How can I achieve this?

我怎样才能做到这一点呢?

Based on the answers posted so far, I am currently doing this:

根据到目前为止公布的答案，我目前正在做:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.

但是问题是在Safari和Internet Explorer中，它在URL的末尾添加了一个问号字符。我需要找到一个不添加任何字符到URL末尾的解决方案。

There are two other solutions to do this: Using JavaScript or styling a link to look like a button.

还有另外两种解决方案:使用JavaScript或样式化链接，使其看起来像一个按钮。

Using JavaScript:

使用JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.

但这显然需要JavaScript，因此屏幕阅读器无法访问它。链接的要点是转到另一个页面。所以试图让按钮像链接一样运行是错误的解决方案。我的建议是你应该使用一个链接，把它设计成一个按钮。

<a href="/link/to/page2">Continue</a>

27 个解决方案

#1

1551  

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

普通的HTML方法是将它放在

中，其中您在action属性中指定所需的目标URL。

 

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

如果需要，设置CSS显示:内联;在窗体上使其与周围的文本保持在流中。与上面示例中的不同，您还可以使用。唯一的区别是元素允许子元素。

 

You'd intuitively expect to be able to use <button href="http://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

您可能会期望能够使用类似于元素的，但不幸的是，根据HTML规范，这个属性并不存在。

 

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only Internet Explorer support is currently (July 2015) still poor).

如果允许CSS，只需使用，使其看起来像一个按钮，并使用外观属性(目前只有Internet Explorer支持(2015年7月)))。

<a href="http://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Or pick one of those many CSS libraries like Bootstrap.

或者选择一个像Bootstrap这样的CSS库。

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.

如果允许JavaScript，请设置window.location.href。

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

#2

396  

<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

#3

387  

If it's the visual appearance of a button you're looking for in a basic HTML anchor tag then you can use the Twitter Bootstrap framework to format any of the following common HTML type links/buttons to appear as a button. Please note the visual differences between version 2, 3 or 4 of the framework:

如果它是一个按钮的外观，你在一个基本的HTML锚标记中寻找，那么你可以使用Twitter的引导框架来格式化任何一个常见的HTML类型链接/按钮作为一个按钮。请注意该框架的第2、3或4版的视觉差异:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) sample appearance:

引导(v4)样品外观:

 

Bootstrap (v3) sample appearance:

引导(v3)样品外观:

 

Bootstrap (v2) sample appearance:

引导(v2)样品外观:

 

#4

127  

Use:

使用:

<a href="http://www.*.com/">
    <button>Click me</button>
</a>

Unfortunately, this markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected. Use another approach.

不幸的是，这个标记在HTML5中不再有效，既不能验证，也不能一直按照预期工作。用另一种方法。

#5

82  

As of HTML5, buttons support the formaction attribute. Best of all, no Javascript or trickery is needed.

在HTML5中，按钮支持formaction属性。最重要的是，不需要Javascript或欺骗。

 

<form>
  <button formaction="http://*.com">Go to Stack Overflow!</button>
</form>

 

Caveats

警告

  • Must be surrounded by <form> tags.
  • 必须被

    标记包围。

  • <button> type must be "submit" (or unspecified), I couldn't get it working with type "button." Which brings up point below.
  • 类型必须是“submit”(或未指定)，我无法让它使用type“button”。下面是点。
  • Overrides the default action in a form. In other words, if you do this inside another form it's going to cause a conflict.
  • 覆盖表单中的默认操作。换句话说，如果你在另一种形式中这样做，就会引起冲突。

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser Support: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction浏览器支持:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

#6

38  

It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).

它实际上非常简单，不使用任何形式元素。您可以使用标记，其中包含一个按钮:)。

Like this:

是这样的:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

And it will load the href into the same page. Want a new page? Just use target="_blank".

它将把href加载到同一个页面。想要一个新页面吗?只使用目标= "平等"。

#7

34  

If you are using an inside form, add the attribute type="reset" along with the button element. It will prevent the form action.

如果您正在使用内部表单，请添加属性type="reset"以及按钮元素。它将阻止表单动作。

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

#8

24  

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

#9

21  

You can simply put an a tag around the element:

你可以简单地在元素周围放一个标签:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

https://jsfiddle.net/hj6gob8b/

#10

17  

Are there any downsides to doing something like the following?

做下面这样的事情有什么缺点吗?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Where a.nostyle is a class that has your link styling (where you can get rid of the standard link styling) and span.button is a class that has the styling for your "button" (background, border, gradient, etc.).

一个地方。nostyle是一个具有链接样式的类(您可以在其中去掉标准的链接样式)和span。button是一个具有“按钮”样式(背景、边框、渐变等)的类。

#11

16  

The only way to do this (except for BalusC's ingenious form idea!) is by adding a JavaScript onclick event to the button, which is not good for accessibility.

实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是在按钮中添加一个JavaScript onclick事件，这不利于可访问性。

Have you considered styling a normal link like a button? You can't achieve OS specific buttons that way, but it's still the best way IMO.

你有没有考虑过把一个普通的链接设计成一个按钮?你无法通过这种方式实现特定于OS的按钮，但在我看来，这仍然是最好的方式。

#12

16  

There seems to be three solutions to this problem (all with pros and cons).

对于这个问题，似乎有三种解决方案(都是有利有弊的)。

Solution 1: Button in a form.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

But the problem with this is that in some version of popular browsers such as Chrome, Safari and Internet Explorer, it adds a question mark character to the end of the URL. So in other words for the code above your URL will end up looking like this:

但问题是，在Chrome、Safari和Internet Explorer等流行浏览器的某些版本中，它在URL的末尾添加了问号字符。换句话说，你的URL上面的代码会变成这样:

http://someserver/pages2?

There is one way to fix this, but it will require server-side configuration. One example using Apache Mod_rewrite would be to redirect all requests with a trailing ? to their corresponding URL without the ?. Here is an example using .htaccess, but there is a full thread here:

有一种方法可以解决这个问题，但是它需要服务器端配置。使用Apache Mod_rewrite的一个例子是将所有请求重定向到末尾?到他们相应的URL而没有?。这里有一个使用。htaccess的例子，但是这里有一个完整的线程:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Similar configurations can vary depending on the webserver and stack used. So a summary of this approach:

类似的配置可以根据所使用的webserver和堆栈而变化。总结一下这个方法

Pros:

优点:

  1. This is a real button, and semantically it makes sense.
  2. 这是一个真正的按钮，从语义上讲是有意义的。
  3. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
  4. 因为它是一个真实的按钮，所以它也会像一个真实的按钮(例如，当它活动时，它会拖拽行为，或者模仿点击空格键的动作)。
  5. No JavaScript, no complex style required.
  6. 没有JavaScript，不需要复杂的样式。

Cons:

缺点:

  1. Trailing ? looks ugly in some browsers. This can be fixed by a hack (in some cases) using POST instead of GET, but the clean way is to have a server-side redirect. The downside with the server side redirect is that it will cause an extra HTTP call for these links because of the 304 redirect.
  2. 拖尾?在某些浏览器中看起来很难看。这可以通过使用POST而不是GET来修复(在某些情况下)，但是干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于304重定向，它将导致这些链接的额外HTTP调用。
  3. Adds extra <form> element
  4. 增加了额外的 <形式> 元素
  5. Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.
  6. 在使用多种形式时，元素的定位可能很棘手，在处理响应性设计时甚至更糟。根据元素的顺序，使用这种解决方案可能无法实现某些布局。如果设计受到这个挑战的影响，这最终会影响可用性。

Solution 2: Using JavaScript.

You can use JavaScript to trigger onclick and other events to mimic the behavior of a link using a button. The example below could be improve and remove from the HTML, but it is there simply to illustrate the idea:

您可以使用JavaScript触发onclick和其他事件，以使用按钮模拟链接的行为。下面的示例可以从HTML中进行改进和删除，但它只是为了说明这个想法:

<button onclick="window.location.href='/page2'">Continue</button>

Pros:

优点:

  1. Simple (for basic requirement) and keep semantic while not requiring an extra form.
  2. 简单(对于基本需求)，保持语义而不需要额外的形式。
  3. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
  4. 因为它是一个真实的按钮，所以它也会像一个真实的按钮(例如，当它活动时，它会拖拽行为，或者模仿点击空格键的动作)。

Cons:

缺点:

  1. Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.
  2. 需要JavaScript，这意味着更难访问。这对于基本(核心)元素(如链接)来说并不理想。

Solution 3: Anchor (link) styled like a button.

Styling a link like a button is relatively easy and can provide similar experience across different browsers. Bootstrap does this, but it is also easy to achieve on your own using simple styles.

像按钮这样的链接是相对容易的，并且可以在不同的浏览器中提供相似的体验。Bootstrap可以做到这一点，但使用简单的样式也很容易实现。

Pros:

优点:

  1. Simple (for basic requirement) and good cross-browser support.
  2. 简单(对于基本需求)和良好的跨浏览器支持。
  3. Does not need a <form> to work.
  4. 不需要

    来工作。

  5. Does not need JavaScript to work.
  6. 不需要JavaScript来工作。

Cons:

缺点:

  1. Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
  2. 语义是有问题的，因为你想要一个按钮作为一个链接而不是一个链接作为一个按钮。
  3. It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.
  4. 它不会重现解决方案1的所有行为。它不支持与button相同的行为。例如，当被拖动时，链接的反应是不同的。此外，如果没有一些额外的JavaScript代码，“空格键”链接触发器也无法工作。这将增加很多复杂性，因为浏览器在如何支持按键事件上并不一致。

Conclusion

Solution #1 (Button in a form) seems like the most transparent for users with minimal work required. If your layout is not impacted by this choice and the server side tweak is feasible, this is a good option for cases where accessibility is the top priority (e.g. links on an error page or error messages).

解决方案#1(表单中的按钮)对于需要最少工作的用户来说似乎是最透明的。如果您的布局不受此选择的影响，并且服务器端调整是可行的，那么对于易访问性是最重要的情况(例如，错误页面上的链接或错误消息)，这是一个很好的选择。

If JavaScript is not an obstacle to your accessibility requirements, then solution #2 (JavaScript) would be preferred over #1 and #3.

如果JavaScript不是您的易访问性需求的障碍，那么解决方案#2 (JavaScript)将优先于#1和#3。

If for some reason, accessibility is vital (JavaScript is not an option) but you are in a situation where your design and/or your server configuration is preventing you from using option #1, then solution #3 (Anchor styled like a button) is a good alternative solve this problem with minimal usability impact.

如果由于某种原因,可访问性是至关重要的(JavaScript不是一个选择),但你的情况设计和/或您的服务器配置是阻止你使用选项# 1,然后解决方案# 3(锚设计像一个按钮)是一个很好的替代解决这个问题以最小的可用性的影响。

#13

15  

Going along with what a few others have added, you can go wild with just using a simple CSS class with no PHP, no jQuery code, just simple HTML and CSS.

与其他一些添加的内容一起，您可以使用一个简单的CSS类，没有PHP，没有jQuery代码，只有简单的HTML和CSS。

Create a CSS class and add it to your anchor. The code is below.

创建一个CSS类并将其添加到锚点。下面的代码。

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

That is it. It is very easy to do and lets you be as creative as you'd like. You control the colors, the size, the shapes(radius), etc. For more detailsm, see the site I found this on.

就是这样。这很容易做到，让你随心所欲地发挥创造力。你可以控制颜色、大小、形状(半径)等等。

#14

14  

@Nicolas,following worked for me as yours didn't have type="button" due to which it started behaving as submit type..since i already have one submit type.it didn't worked for me ....and now you can either add class to button or to <a> to get required layout:

@Nicolas，后续为我工作，因为您的没有type="button"，因为它开始表现为提交类型。因为我已经有一个提交类型。它并没有为我工作....现在你可以添加类到按钮或以获得所需的布局:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

#15

13  

If you want to avoid having to use a form or an input and you're looking for a button-looking link, you can create good-looking button links with a div wrapper, an anchor and an h1 tag. You'd potentially want this so you can freely place the link-button around your page. This is especially useful for horizontally centering buttons and having vertically-centered text inside of them. Here's how:

如果您想避免使用表单或输入，并且正在寻找一个看起来像按钮的链接，您可以使用div包装器、锚和h1标记创建漂亮的按钮链接。您可能希望这样做，以便您可以在页面周围*地放置链接按钮。这对于水平定心按钮和在其内部具有垂直居中的文本特别有用。方法如下:

Your button will be comprised of three nested pieces: a div wrapper, an anchor, and an h1, like so:

您的按钮将由三个嵌套部分组成:一个div包装器、一个锚和一个h1，如下所示:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Then in CSS, your styling should look like so:

在CSS中，你的样式应该是这样的:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Here's a jsFiddle to check it out and play around with it.

这里有一个jsFiddle来检查它并使用它。

Benefits of this setup: 1. Making the div wrapper display: block makes it easy to center (using margin: 0 auto) and position (while an <a> is inline and harder to positionand not possible to center).

这种设置的好处是:1。使div包装器显示:block使其更容易居中(使用margin: 0 auto)和定位(而是内联的，定位更困难，不可能居中)。

  1. You could just make the <a> display:block, move it around, and style it as a button, but then vertically aligning text inside of it becomes hard.

    你可以让显示:块，移动它，并把它作为一个按钮，但是垂直对齐文本在里面变得很困难。

  2. This allows you to make the <a> display: inline-table and the <h1> display: table-cell, which allows you to use vertical-align: middle on the <h1> and center it vertically (which is always nice on a button). Yes, you could use padding, but if you want your button to dynamically resize, that won't be as clean.

    这允许您将 display: inline-table和

    display: table-cell，这允许您在

    上使用垂直对齐:居中，并将其垂直居中(在按钮上总是很好)。是的，你可以使用填充，但是如果你想让你的按钮动态调整大小，那就没有那么干净了。

     

  3. Sometimes when you embed an <a> within a div, only the text is clickable, this setup makes the whole button clickable.

    有时，当您在div中嵌入时，只有文本是可单击的，这种设置使整个按钮可单击。

  4. You don't have to deal with forms if you're just trying to move to another page. Forms are meant for inputting information, and they should be reserved for that.

    如果你只是想转移到另一个页面，你不需要处理表单。表单是用来输入信息的，它们应该被保留下来。

  5. Allows you to cleanly separte the button styling and text styling from each other (stretch advantage? Sure, but CSS can get nasty-looking so it's nice to decompose it).

    允许您清晰地将按钮样式和文本样式彼此分离(拉伸优势?当然，但是CSS可以让你看起来不那么好看，所以分解它很好。

It definitely made my life easier styling a mobile website for variable-sized screens.

它确实让我的生活变得更容易，为各种大小的屏幕设计一个移动网站。

#16

12  

Another option is to create a link in the button:

另一个选择是在按钮中创建一个链接:

<button type="button"><a href="yourlink.com">Link link</a></button>

Then use CSS to style the link and button, so that the link takes up the entire space within the button (so there's no miss-clicking by the user):

然后使用CSS对链接和按钮进行样式化，这样链接就占据了按钮内的整个空间(这样用户就不会错过点击):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

I have created a demo here.

我在这里创建了一个demo。

#17

8  

If you want to create a button that is used for a URL anywhere, create a button class for an anchor.

如果您想要创建用于任何地方的URL的按钮，请为锚创建一个button类。

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

#18

7  

I know there have been a lot of answers submitted, but none of them seemed to really nail the problem. Here is my take at a solution:

我知道已经提交了很多答案，但似乎没有一个能真正解决问题。以下是我的解决方案:

  1. Use the <form method="get"> method that the OP is starting with. This works really well, but it sometimes appends a ? to the URL. The ? is the main problem.
  2. 使用OP开始时的

    方法。这个功能很好，但有时会附加a ?URL。的吗?是主要问题。

  3. Use jQuery/JavaScript to do the link following when JavaScript is enabled so that ? doesn't end up appended to the URL. It will seamlessly fallback to the <form> method for the very small fraction of users who don't have JavaScript enabled.
  4. 启用JavaScript后，使用jQuery/JavaScript进行以下链接?不会被附加到URL。它将无缝地返回到

    方法，用于那些没有启用JavaScript的用户。

  5. The JavaScript code uses event delegation so you can attach an event listener before the <form> or <button> even exist. I'm using jQuery in this example, because it is quick and easy, but it can be done in 'vanilla' JavaScript as well.
  6. JavaScript代码使用事件委托，因此您可以在

    或 甚至存在之前附加一个事件侦听器。我在这个示例中使用jQuery，因为它既快捷又简单，但也可以用“香草”JavaScript完成。

  7. The JavaScript code prevents the default action from happening and then follows the link given in the <form> action attribute.
  8. JavaScript代码阻止默认操作发生，然后遵循

    action属性中给出的链接。

JSBin Example (code snippet can't follow links)

 

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://*.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

 

#19

5  

For HTML 5 and styled button along with image background

用于HTML 5和样式按钮以及图像背景

 

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

 

#20

3  

Regarding BalusC's reply,

关于BalusC回答,

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

I needed to add variables to the button and wasn't sure how. I ended up using input type hidden. I thought this might be helpful to others who found this page like myself.

我需要向按钮添加变量，但不知道如何添加。最后我使用了隐藏的输入类型。我想这对像我这样发现这个页面的人可能有帮助。

#21

3  

Use it as data-href="index.html" inside the button tag.

把它作为data-href = "指数。在按钮标签内。

#22

2  

    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

I used this for a website I'm currently working on and it works great!. If you want some cool styling too I'll put the CSS down here.

我把它用在一个我正在开发的网站上，它运行得很好!如果你也想要一些很酷的样式，我把CSS放在这里。

input[type = "submit"] {
    background-color:white;
    width:200px;
    border: 3px solid #c9c9c9;
    font-size:24pt;
    margin:5px;
    color:#969696;
}
input[type = "submit"]:hover {
    color: white;
    background-color:#969696;
    transition: color 0.2s 0.05s ease;
    transition: background-color 0.2s 0.05s ease;
    cursor: pointer;
}

Working JSFiddle here

在这里工作JSFiddle

#23

2  

Also you can use a button:

你也可以使用按钮:

For example, in ASP.NET Core syntax:

例如,在ASP。网络核心语法:

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

#24

1  

People who have answered using <a></a> attributes on a <button></button> was helpful.

在>上，使用属性回答的人是有帮助的。

BUT then recently, I encountered a problem when I used a link inside a <form></form>.

但是最近，当我在

中使用链接时遇到了一个问题。

 

The button is now regarded like/as a submit button (HTML5). I've tried working a way around, and have found this method.

这个按钮现在被认为是一个提交按钮(HTML5)。我尝试了一种方法，找到了这种方法。

Create a CSS style button like the one below:

创建一个CSS样式按钮，如下所示:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Or create a new one here : CSS Button Generator

或者在这里创建一个新的CSS按钮生成器

And then create your link with a class tag named after the CSS style you have made:

然后用一个类标签创建你的链接，这个类标签是以你的CSS样式命名的:

<a href='link.php' class='btn-style'>Link</a>

Here's a fiddle:

这里有一个小提琴:

JS Fiddle

JS小提琴

#25

1  

You could also set the buttons type-property to "button" (it makes it not submit the form), and then nest it inside a link (makes it redirect the user).

您还可以将按钮类型属性设置为“button”(它使其不提交表单)，然后将其嵌套到一个链接中(使其重定向用户)。

This way you could have another button in the same form that does submit the form, in case that's needed. I also think this is preferable in most cases over setting the form method and action to be a link (unless it's a search-form I guess...)

通过这种方式，您可以在相同的表单中使用另一个按钮提交表单，以备需要。我还认为，在大多数情况下，这比将表单方法和操作设置为链接更可取(除非它是搜索表单，我猜……)

Example:

例子:

<form method="POST" action="/SomePath">
    <input type="text" name="somefield"/>
    <a href="www.target.com"><button type="button">Go to Target!</button></a>
    <button type="submit">submit form</button>
</form>

This way the first button redirects the user, while the second submits the form.

这样，第一个按钮重定向用户，而第二个按钮提交表单。

Be careful to make sure the button doesn't trigger any action, as that will result in a conflict. Also as Arius pointed out, you should be aware that, for the above reason, this isn't strictly speaking considered valid HTML, according to the standard. It does however work as expected in Firefox and Chrome, but I haven't yet tested it for Internet Explorer.

要小心，确保按钮不会触发任何操作，因为这会导致冲突。另外，正如艾利乌指出的，你应该知道，由于上述原因，根据标准，这并不是严格意义上的有效HTML。不过，它在Firefox和Chrome上的表现和预期一样，但我还没有在ie上测试过。

#26

0  

If what you need is that it will look like a button, with emphasis on the gradient image, you can do this:

如果你需要的是它看起来像一个按钮，强调渐变图像，你可以这样做:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

#27

0  

If you want to redirect for pages which reside within your website, then then here's my method - I've added the attribute href to the button, and onclick assigned this.getAttribute('href') to document.location.href

如果您想要重定向位于您的网站中的页面，那么这里是我的方法——我已经向按钮添加了属性href, onclick将this.getAttribute('href')分配给document.location.href

** It won't work if you reference for urls outsite of your domain because of 'X-Frame-Options' to 'sameorigin'.

**如果由于“X-Frame-Options”为“sameorigin”而引用域外的url，就不能运行。

Sample code:

示例代码:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
上一篇：How to display a random picture from a folder?


下一篇：jQuery-what-why-how