Is there a way to get a button element to link to a location without wrapping it in an a href tag

Question

Just wondering if there is a way to get a HTML  lt button gt  element to link to a location without wrapping it in an  lt a href    tag   Button currently looks like    lt button gt Visit Page Now lt  button gt    What I would prefer not to have    lt a href  link html  gt  lt button gt Visit Page Now lt  button gt  lt  a gt    The button is not being used within a form so  lt input type  button  gt  is not an option  I am just curious to see if there is a way to link this particular element without needing to wrap it in an  lt a href tag   Looking forward to hearing some options opinions

User · Answer

LINKS ARE TRICKY

Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:

Ctrl+Click: opens link in new tab
You can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new window
You can simulate this by window.open() with size and/or position specified
Alt+Click: download target
People rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.

EASY WAY OUT

Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.

User · Answer

Here it is using jQuery  See it in action at http   jsfiddle net sQnSZ    lt button id  x  gt test lt  button gt       x   click function        location href  http   cnn com

User · Answer

You can make it a non-submitting button   lt button type  button  gt   and hook something like window location    http   where you want to go  into its onclick handler  This does not work without javascript enabled though   Or you can make it a submit button  and do a redirect on the server  although this obviously requires some kind of server-side logic  but the upside is that is doesn t require javascript    actually  forget the second solution - if you can t use a form  the submit button is out

User · Answer

lt form action  portfolio html  gt    lt button type  link  class  btn btn-primary btn-lg  gt View Work lt  button gt   lt  form gt    I just figured this out  and it links perfectly to another page without having my default link settings over ride my button classes

User · Answer

Well  for a link  there must be a link tag around  what you can also do is that make a css class for the button and assign that class to the link tag  like    x000D   x000D   btn   x000D    background  url https   image flaticon com icons png 128 149 149668 png  no-repeat 0 0  x000D    display  block  x000D    width  128px  x000D    height  128px  x000D    border  none  x000D    outline  none  x000D    x000D   lt a href  btnlink html  id  btn  gt  lt  a gt  x000D   x000D   x000D

User · Answer

Here s a solution which will work even when JavaScript is disabled    lt form action  login html  gt       lt button type  submit  gt Login lt  button gt   lt  form gt    The trick is to surround the button with its own  lt form gt  tag   I personally prefer the  lt button gt  tag  but you can do it with  lt input gt  as well    lt form action  login html  gt       lt input type  submit  value  Login   gt   lt  form gt

User · Answer

Inline Javascript    lt button onclick  window location  http   www example com    gt Visit Page Now lt  button gt    Defining a function in Javascript    lt script gt      function visitPage            window location  http   www example com          lt  script gt   lt button onclick  visitPage     gt Visit Page Now lt  button gt    or in Jquery   lt button id  some id  gt Visit Page Now lt  button gt       some id   click function       window location  http   www example com

User · Answer

Just do this   lt button OnClick   location href  link html    gt Visit Page Now lt  button gt    Although  it s been a while since I ve touched JavaScript - maybe location href is outdated  Anyways  that s how I would do it

[javascript] Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

LINKS ARE TRICKY

EASY WAY OUT

Examples related to javascript

Examples related to html

Examples related to button

Examples related to hyperlink