Answer: You can create an HTML button that acts like a link using an inline onclick event.
HTML(Hypertext Markup Language) is used to create the structure of a webpage. Creating an HTML button that acts as a link is a simple task. There are a few more methods to create an HTML button that acts like a link such as using an anchor tag, form tab, and location.href. We will discuss these methods in this blog in detail.
Table of Contents
HTML elements combined with JavaScript, create a button that acts like a link. Here are some of the most common methods to create a button that acts like a link.
You can link directly the “onclick” event to the button for redirection. The window.location.href function redirects the user to a webpage. You can use this event for attaching the JavaScript to button.
Example: An HTML page with a button that uses the “onclick” event to redirect the user.
<!DOCTYPE html>
<html>
<head>
<title>Using Inline onclick Event</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #f0f0f0;
p {
margin-top: 20px;
font-size: 18px;
}
.Intellipaat {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Inline onclick event</p>
<button class="Intellipaat"
onclick="window.location.href = 'https://intellipaat.com/';">
Click Me
</button>
</body>
</html>
Output:
Explanation: The HTML page includes the button with the inline onclick event, which redirects to the URL mentioned in the code.
You can create a button using the <button> tag inside the <a> tag. You will be redirected to the URL after clicking the button. The href attribute holds the URL.
Example: Creating the HTML page with a button using a button tag inside the <a> tag.
<!DOCTYPE html>
<html>
<head>
<title>Using Button Tag Inside an Anchor Tag</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #f0f0f0;
}
.Intellipaat {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
cursor: pointer;
margin-top: 20px;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>Adding button inside the link tag</p>
<a href="https://intellipaat.com/">
<button class="Intellipaat">
Click Me
</button>
</a>
</body>
</html>
Output:
Explanation: When you click the button, you will be redirected to the specified webpage.
You can create a button with the URL of the website using <a> tag. You can also style the button using CSS properties. The href attribute holds the URL.
Example: The HTML page with a button using the anchor tag that redirects the user to a specific URL.
<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
.Intellipaat {
background-color: white;
border: 2px solid black;
color: black;
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<p>Anchor tag</p>
<a href="https://intellipaat.com/" class="Intellipaat">Click Me</a>
</body>
</html>
Output:
Explanation: When you click the button, you will be redirected to the webpage mentioned in the above code.
You can use <form> tag with attributes such as action or formaction, which redirect you to the webpage. The action attribute redirects the user to the mentioned URL.
Example: The form tag is used to create the button in the HTML page, which redirects the user to a specific URL.
<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that acts like a link
</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
.Intellipaat {
width: 100px;
height: 50px;
background: green;
border: none;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>form tag</h1>
<form action="https://intellipaat.com/">
<button type="submit" class="Intellipaat">Click Me</button>
</form>
</body>
</html>
Output:
Explanation: When you click the submit button, you will be redirected to the mentioned webpage.
You can use location.href to carry the URL of the webpage. This property redirects the user to a mentioned website.
Example: To create the HTML page with a button using location.href that redirects the user to a specific URL when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Actions</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: green;
border: none;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>location.href</h1>
<button onclick="location.href='https://intellipaat.com';">Click Me</button>
</body>
</html>
Output:
Explanation: When you click the button, you are redirected to a specific page mentioned in the code using location.href.
You can use the window.open() to open a webpage in a new tab. This property also redirects the user to the mentioned URL.
Example: To redirect to the mentioned URL, the window.open() is used to open the webpage in the new browser window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Actions</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: green;
border: none;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1> window.open() </h1>
<button onclick="window.open('https://intellipaat.com');">Click Me</button>
</body>
</html>
Output:
Explanation: When you click the button, the webpage opens in the new tab using the window.open().
You can use window.location.replace() to change the present URL to a new one. The history of the current page is not saved.
Example: The window.location.replace() redirects the user to a specific URL when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Redirection Example</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: green;
border: none;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>window.location.replace() </h1>
<button onclick="window.location.replace('https://intellipaat.com');">Click Me</button>
</body>
</html>
Output:
Explanation: When you click the button, window.location.replace() redirects to the webpage and it replaces the current page history.
You can use the element ‘button’ along with the type=’button’ to set the Javascript function to perform the redirection.
Example: To create the HTML page with a button using <button> with type=” button” that redirects the user to a specific URL when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with JavaScript</title>
<style>
/* Make the body take up the full height of the viewport */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
font-family: Arial, sans-serif;
}
/* Add some space between the text and button */
h1 {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Button with type="button" and JavaScript</h1>
<button type="button" onclick="redirectToExample()">Click Me</button>
<script>
function redirectToExample() {
window.location.href = 'https://intellipaat.com';
}
</script>
</body>
</html>
Output:
Explanation: When a button is clicked, it triggers the Javascript function to redirect to the URL.
Conclusion
You can use the HTML elements to create a button that acts like a link. In inline ‘onclick’ events, you can use JavaScript directly within HTML elements, the anchor tag and form tag are used to create buttons and followed by redirecting the users to the mentioned webpage. The methods listed above are more efficient in creating a button that acts like a link.
FAQs
1. Why use the button tag instead of the anchor tag?
Buttons are typically used for actions while anchor tags are used for navigation. However, using a button as a link can be more effective for users in some cases.
2. How can I open the link in a new tab?
You can add the target=”_blank” attribute to the anchor tag or use the window.open().
3. Can I style a button to look exactly like a link?
Yes, you can style a button with CSS to look like a link. Use properties like background, border, color, text-decoration, and cursor.