There must be many reasons that you need to HTML button but it should work like a link
Sometimes you need to have a button on our page which you want to get crawled by the search engines, but as you know that most of the search engines won't crawl HTML button tags, therefore in that case, we want an HTML link which looks like a button and work as a link.
In this tutorial, you will learn various methods to create an SEO friendly and Non-SEO friendly HTML buttons which work like a link
1) Using <a> tag with CSS
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Link Button</title>
<style>
.linkbutton {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
margin: 4px 2px;
padding: 20px 34px;
border-radius: 10px;
}
.linkbutton:hover{
background: #f90303;
border: 1px solid #000000;
}
.linkbutton2{
background-color: #1c87c9;
border: none;
color: white;
padding: 20px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
.linkbutton2:hover {
background: #f90303;
border: 1px solid #000000;
}
</style>
</head>
<body>
<a href="https://www.stechies.com/" class="linkbutton" target="_blank">Stechies</a>
<a href="https://www.stechies.com/" class="linkbutton2" target="_blank">Stechies</a>
</body>
</html>
Note:
- SEO Friendly
- Can open link in new tab
2) Using <Button> tag inside <a> tag
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button Tag Inside A Tag</title>
</head>
<body>
<a href="https://www.stechies.com/" target="_blank">
<button>STechies</button>
</a>
</body>
</html>
Note:
- SEO Friendly
- Open link in new Tab or Window
- This method is invalid for HTML5 because using button tag under <a> tag is invalid in HTML5
3) Using <Button> tag with onclick event
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button Tag with onclick Event</title>
</head>
<body>
<button onclick="window.location.href = 'https://www.stechies.com/'">Stechies</button>
</body>
</html>
Note: Non-SEO Friendly
4) Using <input> tag with onclick event
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Input Tag with Onclick Event</title>
</head>
<body>
<input type="button" name="button" id="button" value="Stechies" onClick="window.location.href = 'https://www.stechies.com/'">
</body>
</html>
Note: Non-SEO Friendly
5) Using <input> tag with formaction attributes
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Input Tag with formaction attributes </title>
</head>
<body>
<form action="https://www.stechies.com/" method="post" name="form1" target="_blank" id="form1">
<input type="submit" name="button" id="button" value="Stechies">
</form>
</body>
</html>
Note:
- Non-SEO Friendly
- Open link in new Tab or Window
- Can submit form values
6) Using <Button> tag with formaction attributes
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Input Tag with formaction attributes </title>
</head>
<body>
<form action="https://www.stechies.com/" method="GET" name="form1" target="_blank" id="form1">
<button type="submit">Stechies</button>
<label for="textfield">Text Field:</label>
<input type="text" name="textfield" id="textfield">
</form>
</body>
</html>
Note:
- Non-SEO Friendly
- Open link in new Tab or Window
- Can submit form values
7) Using <Button> tag with inline formaction attributes
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Input Tag with formaction attributes </title>
</head>
<body>
<form method="GET" name="form1" id="form1">
<button type="submit" formaction="https://www.stechies.com/" target="_blank">Stechies</button>
<label for="textfield">Text Field:</label>
<input type="text" name="textfield" id="textfield">
</form>
</body>
</html>
Note:
- Non-SEO Friendly
- Open link in new Tab or Window
- Can submit form values