How to create an HTML button that acts like a link

Html programming,

All Answers

mhmadesk

2022-05-17

need an explanation for this answer? contact us directly to get an explanation for this 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.

Let's try out the following example to understand how it basically works:

<!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>
	<p><strong>Note:</strong> Open the output of this example in a blank tab (click the arrow next to "Show Output" button) and then click the "Go to Google" button.</p>
</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>
	<p><strong>Note:</strong> Open the output of this example in a blank tab (click the arrow next to "Show Output" button) and then click the "Go to Google" button.</p>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

How to create an HTML button that acts like a link

All Answers

Use the Submit button

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now