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

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

Asked on October 31, 2018 in HTML / CSS.
Add Comment


  • 3 Answer(s)

    Here we can use the Submit Button.
        In such 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.

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

    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.

    For example:

    <!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>
    
    Answered on October 31, 2018.
    Add Comment

    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

    Answered on January 27, 2019.
    Add Comment

    An HTML button wrapped inside a form element with the action attribute specified works as well:

    <form action="link.html" method="get" target="_blank">
        <button type="submit">Link</button>
    </form>
    Answered on February 20, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.