WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to create an HTML button that acts like a link

Topic: HTML / CSSPrev|Next

Answer: Use the Submit Button

In case if you do not have option to use an <a> element then you can use the submit button inside a <form> where the value of the action attribute is set to the desired URL, as shown below:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Make HTML Button Act Like a Link</title>
  • <style>
  •     form {
  •         /* To keep the form in flow with the surrounding text */
  •         display: inline;
  •     }
  • </style>
  • </head>
  • <body>
  •     <form action="https://www.google.com/">
  •         <input type="submit" value="Go to Google">
  •     </form>
  • </body>
  • </html>

However, if you can use the element of your choice then you should better use an anchor element (<a>) and style it using the CSS properties to make it look like a button, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Make HTML Link Look Like a Button</title>
  • <style>
  •     a.link-btn {
  •         color: #fff;
  •         background: #337ab7;
  •         display:inline-block;
  •         border: 1px solid #2e6da4;        
  •         font: bold 14px Arial, sans-serif;
  •         text-decoration: none;
  •         border-radius: 2px;
  •         padding: 6px 20px;
  •     }
  •     a.link-btn:hover {
  •         background-color: #245582;
  •         border-color: #1a3e5b;
  •     }
  • </style>
  • </head>
  • <body>
  •     <a href="https://google.com" class="link-btn">Go to Google</a>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.