How to create an HTML button that acts like a link

ID : 326

viewed : 300

Tags : htmlbuttonhyperlinkanchorhtml





Top 5 Answer for How to create an HTML button that acts like a link

vote vote

99

HTML

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

<form action="https://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.

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

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

<a href="https://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.

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

JavaScript

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

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

Instead of <input type="button"> in above example, you can also use <button>. The only difference is that the <button> element allows children.

vote vote

86

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

Note that the type="button" attribute is important, since its missing value default is the Submit Button state.

vote vote

78

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:

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

Sample output of Boostrap v4 buttons

Bootstrap (v3) sample appearance:

Sample output of Boostrap v3 buttons

Bootstrap (v2) sample appearance:

Sample output of Boostrap v2 buttons

vote vote

62

Use:

<a href="http://www.stackoverflow.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.

vote vote

60

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

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

Caveats

  • Must be surrounded by <form> tags.
  • The <button> type must be "submit" (or unspecified) - I couldn't get it working with type "button." Which brings up the point below.
  • 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: formaction

Browser Support: <button>: The Button element

Top 3 video Explaining How to create an HTML button that acts like a link







Related QUESTION?