Register Login

How to create an HTML button that acts like a link

Updated Apr 24, 2023

HTML provides users with several versatile options to create a program with a button that acts as a link directing to another website. HTML has in-built tags like <a>, <button>, <form>, etc., which can be helpful for programmers in creating a button with a link that opens in a new tab.

Since HTML is the foundation of web pages, users can utilize it in many ways that can be efficient and productive. This article will show how to create an HTML button that acts like a link using different approaches to develop a webpage.

Note: Users can also use CSS to give an attractive look to the button in every code.

In this tutorial, you will learn various methods to create an SEO friendly and Non-SEO friendly HTML buttons which work like a link

Method 1: Using <a> tag with CSS

Code Snippet:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<style>
		.mybut{
			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;
		}
	</style>
</head>

<body>	
	<a href="https://www.stechies.com/" class="mybut" target="_blank">Stechies</a>
</body>
</html>

Output:

Run Code

Note: 

  • Can open link in new tab

Method 2: Using <button> tag with <a> tag 

<button> tag – A <button> tag is one of the most widely used HTML tags that creates a clickable button to submit the request. Users can put links inside the <button> tag and redirect the current web page to the provided location.

<a> tag – The <a> tag, commonly known as the anchor tag, is another HTML tag that creates a hyperlink on the web page. Programmers can use this hyperlink to link a webpage to another web page or some section of the same web page.

In this method, programmers will create a button inside an anchor tag that will direct end-users to another web page of the given location.

Code Snippet:

<!DOCTYPE html>
<html>	
<head>
	<title>USing the button and anchor tags in HTML to create an HTML document that includes a link</title>
	<style>
		.demo {
			background-color: maroon;
			border: 3px solid black;
			color: yellow;
			padding: 6px 12px;
			text-align: center;
			display: inline-block;
			font-size: 30px;
			margin: 20px 40px;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<h1> <b> Creating a Link </b> </h1>
	<a href = 'https://www.stechies.com/'>
		<button class = "demo">Click Here</button>
	</a>
</body>
</html>

Output:

Run Code

Explanation:

In the above code snippet, we used the HTML button and anchor tags that allow programmers to create a web [age that includes a link directing end-users to another web page. We used the <style> tag to specify the style of the button used in the current HTML page.

The different attributes of this style tag illustrate the format of the HTML button. Then we added the link "https://www.stechies.com/" inside the anchor tag with a href attribute that specifies the URL of this page the link holds.

Note:

  • Open the link in a new Tab or Window
  • This method is invalid for HTML5 because using a button tag under <a> tag is invalid in HTML5

Method 3: Using <Button> tag with onclick event

The onclick event helps users to perform a specific function by clicking the HTML button. It gets triggered when end-users click the button and act as a link that will redirect the current page to another web page that users will define as the target location.

The below example will help to understand more easily

Code Snippet:

<!DOCTYPE html>
<html>	
<head>
	<title> USing the button and anchor tags in HTML to create an HTML document that includes a link </title>
	<style>
		.demo {
			background-color: grey;
			border: 3px solid black;
			color: black;
			padding: 6px 12px;
			text-align: center;
			display: inline-block;
			font-size: 30px;
			margin: 20px 40px;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<h1>Creating a Link</h1>
	<button class = "demo" onclick = "window.location.href = 'https://www.stechies.com/articles/';">
		Click Here
	</button>
</body>
</html>

Output:

Run Code

Explanation:

Here, we used the button tag with an onclick event attribute which will trigger the action once end-users click the button provided in the content. Inside the onclick event, we used the window.location.href, which specifies the URL of the location to which the onclick event will direct the end-user.

When end-users click the button, it redirects them to the new web page, as shown in the output screenshot.

Method 4: Using <input> tag with onclick event

Code Snippet:

<!DOCTYPE html>
<html>	
<head>
	<title> USing the button and anchor tags in HTML to create an HTML document that includes a link </title>
</head>

<body>
	<input type="button" name="button" id="button" value="Stechies" onClick="window.location.href = 'https://www.stechies.com/'">
</body>
</html>

Output:

Run Code

Method 5: Using <input> tag with formaction attributes

Code Snippet:

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

Output:

Run Code

Note:

  • Open the link in a new Tab or Window
  • Can submit form values

Method 6:Using the HTML form and a button tag

Users can use the HTML <form> tag to create a form on a web page having an interactive control for end-user input. In this method, we will use two types of HTML tags, i.e., <form> tag and <button> tag.

Code Snippet:

<!DOCTYPE html> 
<html>	
<head>
<title> USing the button and anchor tags in HTML to create an HTML document that includes a link </title> 
<style> 
	.demo { 
		background-color: yellow; 
		border: 3px solid black; 
		color: red; 
		padding: 6px 12px; 
		text-align: center; 
		display: inline-block; 
		font-size: 30px; 
		margin: 20px 40px; 
		cursor: pointer; 
	} 
</style> 
</head> 

<body> 
<h1>Creating a Link</h1> 
<form action = "https://www.stechies.com/interview-questions-library/"> 
	<button class = "demo" type = "submit"> 
		Click Here 
	</button> 
</form> 
</body>
</html>

Output:

Run Code

Explanation:

We used the <form> tag with the <button> tag in this code snippet. When end-users click the button, it calls the form action attribute and will redirect the web page to the given location we provided in the HTML document.

Note:

  • Open the link in a new Tab or Window
  • Can submit form values

Method 7: Using <Button> tag with inline formaction attributes

Code Snippet:

<!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>
</form>
</body>
</html>

Output:

Run Code

Note:

  • Open the link in a new Tab or Window
  • Can submit form values

Method 8: Adding styles as an HTML button to the link

We will create a link using the anchor tag with href and class attributes and apply CSS properties to create a button in this method.

Code Snippet:

<!DOCTYPE html> 
<html>	
<head>
<title> USing the button and anchor tags in HTML to create an HTML document that includes a link </title> 
<style> 
	.demo { 
		background-color: blue; 
		border: 3px solid black; 
		color: white; 
		padding: 6px 12px; 
		text-align: center; 
		display: inline-block; 
		font-size: 30px; 
		margin: 20px 40px; 
		cursor: pointer; 
		text-decoration: none;
	} 
</style> 
</head> 

<body> 
<h1>Creating a Link</h1> 
	<a href = "https://www.stechies.com/photoshop/" class = "demo">Click here</a> 
</body> 
</html>	

Output:

Run Code

Explanation:

It is as simple as the other methods users use to create an HTML document to add a button that redirects the end-users to another web page. We used the CSS property inside the <style> tag with an anchor tag. The href attribute of the anchor tag will specify the link, and the class attribute will call the style function "demo."

Conclusion:

To sum up, all these are the methods that users can use to create an HTML button that acts like a link, and end-users can get a redirection to another web page. While developing a web page, programmers often use these approaches based on their requirements and efficiency.


×