Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I create an HTML button that acts like a link?
Creating an HTML button that behaves like a link allows developers to combine the visual appeal of buttons with the navigation functionality of links. This technique is useful when you want a more prominent, clickable element that stands out better than traditional text links.
There are three main approaches to create HTML button links
- Using the <a> tag Wrapping a button inside an anchor element
- Using the <form> tag Creating a form with a submit button that navigates to a URL
- Using JavaScript onclick event Adding click handlers to buttons for programmatic navigation
Method 1: Using the <a> Tag
The simplest approach is to wrap a <button> element inside an <a> tag. This method preserves the button's appearance while providing link functionality.
Syntax
<a href="URL"> <button class="button-class">Button Text</button> </a>
Example
Following example demonstrates creating a button link using the anchor tag
<!DOCTYPE html>
<html>
<head>
<title>Button Link with Anchor Tag</title>
<style>
.mybtn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.mybtn:hover {
background-color: #45a049;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Free Resources</h2>
<p>Click the button to visit our Tutorial Library:</p>
<a href="https://www.tutorialspoint.com/tutorialslibrary.htm">
<button class="mybtn">Tutorial Library</button>
</a>
</body>
</html>
The button appears as a styled clickable element that navigates to the specified URL when clicked
Free Resources Click the button to visit our Tutorial Library: [Tutorial Library] (green button with hover effect)
Method 2: Using the <form> Tag
This method uses a form with action attribute pointing to the target URL. When the submit button is clicked, the form submits and navigates to the specified location.
Syntax
<form action="URL" method="get"> <button type="submit" class="button-class">Button Text</button> </form>
Example
Following example shows how to create a button link using a form element
<!DOCTYPE html>
<html>
<head>
<title>Button Link with Form Tag</title>
<style>
.mybtn {
background-color: #008CBA;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.mybtn:hover {
background-color: #007B9A;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Learning Resources</h2>
<p>Access our comprehensive eBook collection:</p>
<form action="https://www.tutorialspoint.com/latest/ebooks" method="get">
<button class="mybtn" type="submit">Browse Ebooks</button>
</form>
</body>
</html>
The form submits when the button is clicked, redirecting the user to the ebooks page
Learning Resources Access our comprehensive eBook collection: [Browse Ebooks] (blue button with hover effect)
Method 3: Using JavaScript onclick Event
This approach uses JavaScript's window.location.href property to programmatically navigate to a URL when the button is clicked.
Syntax
<button onclick="window.location.href='URL'" class="button-class"> Button Text </button>
Example
Following example demonstrates using JavaScript onclick event for button navigation
<!DOCTYPE html>
<html>
<head>
<title>Button Link with onclick Event</title>
<style>
.mybtn {
background-color: #f44336;
color: white;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.mybtn:hover {
background-color: #d32f2f;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Online Compiler</h2>
<p>Try our online coding environment:</p>
<button class="mybtn" onclick="window.location.href='https://www.tutorialspoint.com/codingground.htm'">
Launch CodingGround
</button>
</body>
</html>
When clicked, the JavaScript code executes and redirects the browser to the CodingGround page
Online Compiler Try our online coding environment: [Launch CodingGround] (red button with smooth transition)
Comparison of Methods
Each method has its own advantages and use cases
| Method | Advantages | Best Use Case |
|---|---|---|
| <a> tag | Simple, semantic, works without JavaScript, supports right-click "open in new tab" | Simple navigation, SEO-friendly links |
| <form> tag | Can send data along with navigation, works without JavaScript | When you need to submit form data to the target page |
| JavaScript onclick | Most flexible, can add custom logic before navigation | Complex navigation logic, conditional redirects |
Additional JavaScript Navigation Options
Besides window.location.href, JavaScript provides other navigation methods
Example Different JavaScript Navigation Methods
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Navigation Methods</title>
<style>
.nav-btn {
background-color: #555;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Navigation Methods</h3>
<button class="nav-btn" onclick="window.location.href='https://www.tutorialspoint.com'">
location.href
</button>
<button class="nav-btn" onclick="window.location.assign('https://www.tutorialspoint.com')">
location.assign()
</button>
<button class="nav-btn" onclick="window.open('https://www.tutorialspoint.com', '_blank')">
Open in New Tab
</button>
</body>
</html>
This example shows different ways to navigate: same tab replacement, programmatic assignment, and opening in a new tab
Navigation Methods [location.href] [location.assign()] [Open in New Tab]
Conclusion
Creating HTML button links can be achieved through three main methods: wrapping buttons in anchor tags, using form submissions, or employing JavaScript onclick events. The anchor tag method is most semantic and SEO-friendly, while JavaScript provides the most flexibility for complex navigation scenarios. Choose the method that best fits your specific use case and technical requirements.
4K+ Views
