How do I make a button act as a link in HTML?

To add a link to a button, you can use an anchor tag <a> which will wrap your button . Here's an example code with HTML. You can replace https://www.example.com with the URL you want to link to and "Click me" with the text you want to display on the button.

How do I create an interactive link in HTML?

Chapter Summary Use the <a> element to define a link. Use the href attribute to define the link address. Use the target attribute to define where to open the linked document. Use the <img> element (inside <a> ) to use an image as a link. More items...

How do I create a push button link in HTML?

Use the <button> tag in HTML to add a push button . The HTML <button> tag is used for creating a button within HTML form. You can also use <input> tag to create similar buttons. Specifies that the button should have input focus when the page loads.

How do I link a button to a form in HTML?

Use the Action or Formaction Attribute We create a form using the FORM tag in HTML. Inside it, we simply create a button element. This button can be brought to action either by using formaction attribute in the definition of the button or specifying action attribute in the <FORM> tag.

How do you make a button that acts like a link?

Methods to Add a Link to an HTML Button Inline onclick Event: The use of an inline onclick event. ... Using button tag inside <a> tag: This method create a button inside anchor tag. ... Using Anchor tag as a Button link. ... Using form tags. Mar 21, 2024

What is a href in HTML?

What is the HTML a href attribute? In HTML, the inline a (anchor) element denotes a hyperlink from one web address to another . All functional a elements must contain the href (hypertext reference) attribute inside the opening a tag.

What is the button type in HTML?

HTML | <button> type Attribute The <button> type attribute is used to specify the type of button . It specifies the type attribute of <button> element. The default types of <button> element can vary from browser to browser. Syntax: <button type="button|submit|reset">

Can you use a button as a link?

You can make a button that acts like a link or make a link that looks like a button but should avoid doing this . Links and buttons have different roles. If you must choose between the two, for example, if you are implementing a design created by a UX designer, make a link that is styled to look like a button.

How to redirect a page in HTML?

Redirect to another page with HTML <a> Tag Upon clicking the anchor link, the browser navigates to the provided URL, facilitating seamless page redirection within the web application. Example: Here we are using anchor tag to redirect our one page to another page.

How to add a link button using JavaScript?

How to create a link in JavaScript ? Create an anchor <a> element. Create a text node with some text which will display as a link. Append the text node to the anchor <a> element. Set the title and href property of the <a> element. Append <a> element in the body. Nov 20, 2023

How to create an HTML button that acts like a link?

Improve

Like Article

Save Article

Save

Report issue

Report

There are several methods to create an HTML button that acts as a link. Some of them are discussed below:
Note: Adding basic CSS property to the button in every method to make button looks better.

Using onclick Event: The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page into the given location.

<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>

<style>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
See Also
Lazy binding Link Generator | Pimcore Development Documentation HTML input type="url"How do I add dynamic data to clickable links?

<button class="GFG"
onclick="window.location.href = 'https://ide.geeksforgeeks.org';">
Click Here
</button>
</body>
</html>
Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location.

<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>

<style>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>

<a href='https://ide.geeksforgeeks.org/'>
<button class="GFG">
Click Here
</button>
</a>
</body>
</html>
Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.

<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>

<style>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
text-decoration:none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>

<a href="https://ide.geeksforgeeks.org/" class="GFG">
Click here
</a>
</body>
</html>
See Also
HTML input type="tel"
Using form tags: This method uses form tag and button tag. When button is clicked then the form action attribute is called and web page redirect into the given location.

<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>

<style>
.gfg {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>

<form action="https://ide.geeksforgeeks.org/">
<button class = "gfg" type="submit">
Click Here
</button>
</form>
</body>
</html>

Note: The output will be same for every method.

Output:

Before clicking the button:
After clicking the button:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Last Updated : 29 Jul, 2021

Like Article

Save Article

HTML | DOM Style resize Property

How to clear the content of a div using JavaScript?

Share your thoughts in the comments

How to create an HTML button that acts like a link? - GeeksforGeeks (2024)

Please Login to comment...

FAQs

How do I make a button act as a link in HTML? ›