How to create an HTML button that acts like a link

Question

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   I would also like it so there aren t any extra characters  or parameters in the URL   How can I achieve this     Based on the answers posted so far  I am currently doing this    lt form method  get  action   page2  gt       lt button type  submit  gt Continue lt  button gt   lt  form gt    but the problem with this is that in Safari and Internet nbsp 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   There are two other solutions to do this  Using JavaScript or styling a link to look like a button   Using JavaScript    lt button onclick  window location href   page2   gt Continue lt  button gt    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    lt a href   link to page2  gt Continue lt  a gt

User · Answer

if you are using SSL Certificate    lt a href  https   www google com  target   blank  gt  lt button gt Click me   lt  button gt  lt  a gt

User · Answer

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     It won t work if you reference for urls outsite of your domain because of  X-Frame-Options  to  sameorigin    Sample code    lt button onclick  document location href this getAttribute  href     href     gt Home lt  button gt

User · Answer

For HTML 5 and styled button along with image background   x000D   x000D   lt a id  Navigate  href  http   www google com  gt  x000D     lt input  x000D      type  button  x000D      id  NavigateButton  x000D      style   x000D        background-image  url http   cdn3 blogsdna com wp-content uploads 2010 03 Windows-Phone-7-Series-Icons-Pack png   x000D        background-repeat  no-repeat  x000D        background-position  -272px -112px  x000D        cursor pointer  x000D        height  40px  x000D        width  40px  x000D        border-radius  26px  x000D        border-style  solid  x000D        border-color  000  x000D        border-width  3px   title  Navigate  x000D        gt  x000D   lt  a gt  x000D   x000D   x000D

User · Answer

As of HTML5  buttons support the formaction attribute  Best of all  no Javascript or trickery is needed    x000D   x000D   lt form gt  x000D     lt button formaction  http   stackoverflow com  gt Go to Stack Overflow  lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    Caveats   Must be surrounded by  lt form gt  tags   lt button gt  type must be  submit   or unspecified   I couldn t get it working with type  button   Which brings up 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  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

User · Answer

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    x000D   x000D  input type  submit     x000D    background-color  white  x000D    width  200px  x000D    border  3px solid  c9c9c9  x000D    font-size  24pt  x000D    margin  5px  x000D    color   969696  x000D    x000D   x000D  input type  submit   hover   x000D    color  white  x000D    background-color   969696  x000D    transition  color 0 2s 0 05s ease  x000D    transition  background-color 0 2s 0 05s ease  x000D    cursor  pointer  x000D    x000D   lt input type  submit  name  submit  onClick  window location   http   example com   gt  x000D   x000D   x000D    Working JSFiddle here

User · Answer

HTML  The plain HTML way is to put it in a  lt form gt  wherein you specify the desired target URL in the action attribute    lt form action  https   google com  gt       lt input type  submit  value  Go to Google    gt   lt  form gt    If necessary  set CSS display  inline  on the form to keep it in the flow with the surrounding text  Instead of  lt input type  submit  gt  in above example  you can also use  lt button type  submit  gt   The only difference is that the  lt button gt  element allows children   You d intuitively expect to be able to use  lt button href  https   google com  gt  analogous with the  lt a gt  element  but unfortunately no  this attribute does not exist according to HTML specification   CSS  If CSS is allowed  simply use an  lt a gt  which you style to look like a button using among others the appearance property  it s only not supported in Internet nbsp Explorer     lt a href  https   google com  class  button  gt Go to Google lt  a gt      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    lt a href  https   google com  class  btn btn-primary  gt Go to Google lt  a gt    JavaScript  If JavaScript is allowed  set the window location href    lt input type  button  onclick  location href  https   google com    value  Go to Google    gt    Instead of  lt input type  button  gt  in above example  you can also use  lt button gt   The only difference is that the  lt button gt  element allows children

User · Answer

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   Use the  lt form method  quot get quot  gt  method that the OP is starting with  This works really well  but it sometimes appends a   to the URL  The   is the main problem  This solution works without JavaScript enabled  The fallback will add a   to the end of the URL though  If JavaScript is enabled then you can use jQuery JavaScript to handle following the link  so that   doesn t end up appended to the URL  It will seamlessly fallback to the  lt form gt  method for the very small fraction of users who don t have JavaScript enabled  The JavaScript code uses event delegation so you can attach an event listener before the  lt form gt  or  lt button gt  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  The JavaScript code prevents the default action from happening and then follows the link given in the  lt form gt  action attribute   JSBin Example  code snippet can t follow links   x000D   x000D     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      x000D   lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  https   code jquery com jquery-1 11 1 min js  gt  lt  script gt           lt meta charset  utf-8  gt           lt title gt Form buttons as links lt  title gt       lt  head gt       lt body gt           lt  -- Set  action  to the URL you want the button to go to -- gt           lt form method  get  action  http   stackoverflow com questions 2906582 how-to-create-an-html-button-that-acts-like-a-link  gt               lt  -- Add the class  link  to the button for the event listener -- gt               lt button type  submit  class  link  gt Link lt  button gt           lt  form gt       lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

If you re using a css library or a theme just apply the classes of a button to the anchor link tag   Below is an example with OneUI     lt a  class  btn-block-option  href    gt       lt i class  si si-reload  gt  lt  i gt     lt  a gt

User · Answer

x000D   x000D   lt button onclick  location href  http   www example com   type  button  gt  x000D           www example com lt  button gt  x000D   x000D   x000D    Note that the type  button  attribute is important  since its missing value default is the Submit Button state

User · Answer

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

User · Answer

You can use javascript    x000D   x000D   lt html gt  x000D   lt button onclick  window location    http   www google com   gt  x000D              Google x000D           lt  button gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Replace http   www google com with your website  make sure to include http    before the URL

User · Answer

7 Ways to do that    Using window location href    URL  Using window location replace  URL   Using window location    URL  Using window open  URL   Using window location assign  URL   Using HTML form Using HTML anchor tag    x000D   x000D   lt  -- Using window location href    URL  -- gt  x000D   lt button onclick  window location href    https   stackoverflow com   gt  x000D    Click Me x000D   lt  button gt  x000D   x000D   lt  -- Using window location replace  URL   -- gt  x000D   lt button onclick  window location replace  https   stackoverflow com    gt  x000D    Click Me x000D   lt  button gt  x000D   x000D   lt  -- Using window location    URL  -- gt  x000D   lt button onclick  window location    https   stackoverflow com   gt  x000D    Click Me x000D   lt  button gt  x000D   x000D   lt  -- Using window open  URL   -- gt  x000D   lt button onclick  window open  https   stackoverflow com    self          gt  x000D    Click Me x000D   lt  button gt  x000D   x000D   lt  -- Using window location assign  URL   -- gt  x000D   lt button onclick  window location assign  http   www stackoverflow com    gt  x000D    Click Me x000D   lt  button gt  x000D   x000D   lt  -- Using HTML form -- gt  x000D   lt form action  https   stackoverflow com  method  get  gt  x000D     lt input type  submit  value  Click Me   gt  x000D   lt  form gt  x000D   x000D   lt  -- Using HTML anchor tag -- gt  x000D   lt a href  https   stackoverflow com  gt  x000D     lt button gt Click Me lt  button gt  x000D   lt  a gt  x000D   x000D   x000D

User · Answer

If you are using an inside form  add the attribute type  reset  along with the button element  It will prevent the form action    lt button type  reset  onclick  location href  http   www example com   gt      www example com  lt  button gt

User · Answer

There seems to be three solutions to this problem  all with pros and cons   Solution 1  Button in a form   lt form method  quot get quot  action  quot  page2 quot  gt       lt button type  quot submit quot  gt Continue lt  button gt   lt  form gt   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  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  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  Pros   This is a real button  and semantically it makes sense  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   No JavaScript  no complex style required   Cons   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  Adds extra  lt form gt  element 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   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   lt button onclick  quot window location href   page2  quot  gt Continue lt  button gt   Pros   Simple  for basic requirement  and keep semantic while not requiring an extra form  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    Cons   Requires JavaScript which means less accessible  This is not ideal for a base  core  element such as a link   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  Pros   Simple  for basic requirement  and good cross-browser support  Does not need a  lt form gt  to work  Does not need JavaScript to work   Cons   Semantic is sort of broken  because you want a button that acts like a link and not a link that acts like a button  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  quot space bar quot  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   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   If JavaScript is not an obstacle to your accessibility requirements  then solution  2  JavaScript  would be preferred over  1 and  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

User · Answer

HTML Answer  If you want to create a HTML button that acts like a link  use the 2 common atributtes for it   and or action  quot  quot    lt form action  quot stackoverflow com quot   gt      lt button type  quot submit quot  value  quot Submit Form quot       OR     quot href quot  is part of the  attribute  It helps direct links   lt a href  quot stackoverflow com quot  gt Href lt  a gt

User · Answer

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   Create a CSS class and add it to your anchor  The code is below    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      lt HTML gt       lt a class  button-link  href  http   www go-some-where com         target   blank  gt Press Here to Go lt  a gt    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

User · Answer

People who have answered using  lt a gt  lt  a gt  attributes on a  lt button gt  lt  button gt  was helpful   BUT then recently  I encountered a problem when I used a link inside a  lt form gt  lt  form gt    The button is now regarded like as a submit button  HTML5   I ve tried working a way around  and have found this method   Create a CSS style button like the one below    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  And then create your link with a class tag named after the CSS style you have made    lt a href  link php  class  btn-style  gt Link lt  a gt    Here s a fiddle   JS Fiddle

User · Answer

Try  x000D   x000D   abutton      background   bada55  padding  5px  border-radius  5px     transition  1s  text-decoration  none  color  black     abutton hover   background   2a2     x000D   lt a href  https   example com  class  abutton  gt Continue lt  a gt  x000D   x000D   x000D

User · Answer

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  lt a gt  to get required layout    lt a href  http   www google com   gt       lt button type  button  gt Click here lt  button gt   lt  a gt

User · Answer

If you want to create a button that is used for a URL anywhere  create a button class for an anchor   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

User · Answer

It is actualy very simple and without using any form elements  You can just use the  lt a  tag with a button inside      Like this    lt a href  http   www google com  target   parent  gt  lt button gt Click me   lt  button gt  lt  a gt    And it will load the href into the same page  Want a new page  Just use target   blank    EDIT  Couple of years later  while my solution still works  keep in mind you can use a lot of CSS to make it look whatever you want  This was just a fast way

User · Answer

Use    lt a href  http   www stackoverflow com   gt       lt button gt Click me lt  button gt   lt  a gt    Unfortunately  this markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected  Use another approach

User · Answer

Another option is to create a link in the button    lt button type  button  gt  lt a href  yourlink com  gt Link link lt  a gt  lt  button gt    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    button  button a position relative   button a top 0 left 0 bottom 0 right 0     I have created a demo here

User · Answer

You can simply put an a tag around the element    lt a href  http   google com  target   blank  gt   lt button gt My Button lt  button gt   lt  a gt    https   jsfiddle net hj6gob8b

User · Answer

Type window location and press enter in your browser console  Then you can get the clear idea what location contains     hash        host   stackoverflow com     hostname   stackoverflow com     href   https   stackoverflow com questions 2906582 how-to-create-an-html-button-     that-acts-like-a-link     origin   https   stackoverflow com     pathname    questions 2906582 how-to-create-an-html-button-that-acts-like-a-link     port        protocol   https     You can set any value from here   So For redirect another page you can set href value with your link      window location href   your link   In Your Case-       lt button onclick  window location href  www google com   gt Google lt  button gt

User · Answer

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    lt a class  btn  href    gt Link lt  a gt   lt button class  btn  type  submit  gt Button lt  button gt   lt input class  btn  type  button  value  Input  gt   lt input class  btn  type  submit  value  Submit  gt    Bootstrap  v4  sample appearance     Bootstrap  v3  sample appearance     Bootstrap  v2  sample appearance

User · Answer

If what you need is that it will look like a button  with emphasis on the gradient image  you can do this    lt a href  www yourlink com  class  btn btn-gradient  gt  lt i class  fa fa-home  gt  Button Text lt  i gt  lt  a gt

User · Answer

Also you can use a button   For example  in ASP NET Core syntax      Some other tags   lt form method  post  gt         lt input asp-for  YourModelPropertyOrYourMethodInputName        value   TheValue  type  hidden    gt         lt button type  submit  class  link-button  formaction   TheDestinationController TheDestinationActionMethod  gt          TextValue         lt  button gt     lt  form gt     Other tags       lt style gt          link-button           background  none  important          border  none          padding  0  important          color   20a8d8          cursor  pointer         lt  style gt

User · Answer

In JavaScript  setLocation base  string      window location href   base      In HTML   lt button onclick  setLocation    lt whatever gt    gt GO lt  button gt

User · Answer

Why not just place your button inside of a reference tag e g    lt a href  https   www google com   gt  lt button gt Next lt  button gt  lt  a gt    This seems to work perfectly for me and does not add any  20 tags to the link  just how you want it  I have used a link to google to demonstrate   You could of course wrap this in a form tag but it is not necessary   When linking another local file just put it in the same folder and add the file name as the reference  Or specify the location of the file if in is not in the same folder    lt a href  myOtherFile  gt  lt button gt Next lt  button gt  lt  a gt    This does not add any character onto the end of the URL either  however it does have the files project path as the url before ending with the name of the file  e g   If my project structure was        denotes a folder - denotes a file while four   denote a sub directory or file in parent folder    public        html           -main html           -secondary html  If I open main html the URL would be   http   localhost 0000 public html main html  ijt i7ms4v9oa7blahblahblah   However  when I clicked the button inside main html to change to secondary html  the URL would be    http   localhost 0000 public html secondary html    No special characters included at the end of the URL  I hope this helps  By the way -   20 denotes a space in a URL its encoded and inserted in the place of them    Note  The localhost 0000 will obviously not be 0000 you ll have your own port number there    Furthermore the   ijt xxxxxxxxxxxxxx at the end off the main html URL  x is determined by your own connection so obviously will not be equal to mine    It might seem like I m stating some really basic points but I just want to explain as best as I can  Thank you for reading and I hope this help someone at the very least  Happy programming

User · Answer

lt form gt       lt input type  quot button quot  value  quot Home Page quot  onclick  quot window location href  http   www wherever com  quot  gt    lt  form gt

User · Answer

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    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    x000D   x000D   lt form method  POST  action   SomePath  gt  x000D     lt input type  text  name  somefield    gt  x000D     lt a href  www target com  gt  lt button type  button  gt Go to Target  lt  button gt  lt  a gt  x000D     lt button type  submit  gt submit form lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    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 nbsp Explorer

User · Answer

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   Your button will be comprised of three nested pieces  a div wrapper  an anchor  and an h1  like so    x000D   x000D   link-button-wrapper   x000D      width  200px  x000D      height  40px  x000D      box-shadow  inset 0px 1px 0px 0px  ffffff  x000D      border-radius  4px  x000D      background-color   097BC0  x000D      box-shadow  0px 2px 4px gray  x000D      display  block  x000D      border 1px solid  094BC0  x000D    x000D   link-button-wrapper  gt  a   x000D      display  inline-table  x000D      cursor  pointer  x000D      text-decoration  none  x000D      height  100   x000D      width 100   x000D    x000D   link-button-wrapper  gt  a  gt  h1   x000D      margin  0 auto  x000D      display  table-cell  x000D      vertical-align  middle  x000D      color   f7f8f8  x000D      font-size  18px  x000D      font-family  cabinregular  x000D      text-align  center  x000D    x000D   lt div class  link-button-wrapper  gt  x000D       lt a href  your link here  gt  x000D           lt h1 gt Button  lt  h1 gt  x000D       lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Here s a jsFiddle to check it out and play around with it   Benefits of this setup  1  Making the div wrapper display  block makes it easy to center  using margin  0 auto  and position  while an  lt a  is inline and harder to positionand not possible to center     You could just make the  lt a  display block  move it around  and style it as a button  but then vertically aligning text inside of it becomes hard  This allows you to make the  lt a  display  inline-table and the  lt h1  display  table-cell  which allows you to use vertical-align  middle on the  lt 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  Sometimes when you embed an  lt a  within a div  only the text is clickable  this setup makes the whole button clickable  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  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     It definitely made my life easier styling a mobile website for variable-sized screens

[html] How to create an HTML button that acts like a link?

Examples related to html

Examples related to button

Examples related to hyperlink

Examples related to anchor