How to Make a Button Link to Another Page in HTML
In this tutorial, we are going to see how to make a button link to another page in HTML. There are many ways to make an HTML button that looks like a link (that is, once the user clicks on the link, the user is redirected to another page).
Pick one of the following techniques to make a link to another page using HTML button.
1. Add onclick event on <button> tag
<!DOCTYPE html>
<html>
<head>
<title>Make a Button Link to Another Page</title>
</head>
<body>
<button onclick="window.location.href = 'https://stackhowto.com';"> Click here </button>
</body>
</html>
| Result |
|---|
2. Add onclick event on <input> tag
<!DOCTYPE html>
<html>
<head>
<title>Make a Button Link to Another Page</title>
</head>
<body>
<input type="button" onclick="window.location.href = 'https://stackhowto.com';" value="Click here"/>
</body>
</html>
| Result |
|---|
3. Use the form’s action attribute
<!DOCTYPE html>
<html>
<head>
<title>Make a Button Link to Another Page</title>
</head>
<body>
<form action="https://stackhowto.com">
<button type="submit">Click here</button>
</form>
</body>
</html>
| Result |
|---|
4. HTML button that acts as a link using CSS
<!DOCTYPE html>
<html>
<head>
<title>Make a Button Link to Another Page</title>
<style>
.button {
background-color: #1c87c9;
box-shadow: 0 5px 0 #105cad;
color: white;
padding: 1em 1.5em;
position: relative;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<a href="https://stackhowto.com" class="button">Click here</a>
</body>
</html>
| Result |
|---|
| Click here |
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 1
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 2
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 3
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 4
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 5
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 6
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 7
- Contact form with HTML, CSS, and Javascript
- Customize radio buttons using CSS
- Customize checkbox using CSS
- How to Style Select Option Dropdown with only CSS
- Styling an input type=”file” button with CSS
- How to write comments in HTML
- How to write comments in CSS
- How to vertically center an image in a DIV using CSS
- How to Disable a Link using Only CSS
- How to Resize Background Images with CSS3
- How to overlay one DIV over another div using CSS
- How to create a list without bullets in HTML
- How to dynamically change the width and height of DIV based on content using CSS
- How to Center Text Vertically in DIV with CSS
- How to Set the Height of a DIV to 100% with CSS
- How to Horizontally Center a DIV with CSS
- How to change the color of HR tag with CSS
- How to Auto-resize an Image to Fit into a DIV Container using CSS
- How to change the cursor into a hand when a user hovers over a list item?
- How to Draw a Vertical Line in HTML
- How to Change Background Opacity without Affecting Text
- How to Remove White Space Under an Image Using CSS
- How to Make a Button Link to Another Page in HTML
- How To Write Text Over an Image in HTML With CSS
- How to Make a Custom Cursor Using CSS
- How to use shadow effect on HTML elements using CSS
- How to add shadow to text in CSS
- How to Change Text Color on Hover in CSS
- How to Make a DIV Element Editable in HTML
- How to Change Image on Hover with CSS
- How to style div with an inner border inside a div using CSS
- How to Place Two DIVs with Same Height Side by Side in CSS
- How to remove spaces between cells in the HTML table
- How to Disable the Resizing of Textarea Using CSS
- How to Style CSS Checkboxes with Font Awesome
