Current Location：How HTML > HTML Articles > Content

HTML Button Href

HTML Button Href

In HTML, buttons are used to trigger an action when clicked by a user. By default, buttons do not have a href attribute like anchor (<a>) tags do. However, it is possible to create a button that behaves like a hyperlink by using JavaScript. In this article, we will explore how to create HTML buttons with href functionality using different methods and examples.

Method 1: Using JavaScript window.location.href

One way to create a button with an href attribute is to use JavaScript to redirect the user to a new URL when the button is clicked. Here’s an example of how you can achieve this:

<!DOCTYPE html>
<html>
<head>
  <title>Button With Href</title>
</head>
<body>
  <button onclick="window.location.href='https://www.how2html.com'">Visit how2html.com</button>
</body>
</html>

Output:

HTML Button Href

In the above code, the window.location.href property is used to change the current URL of the browser when the button is clicked. Replace 'https://www.how2html.com' with the desired URL.

Method 2: Using <a> Tag Inside Button

Another way to create a button with an href attribute is to nest an <a> tag inside the button. This allows you to style the link as a button while retaining the functionality of a hyperlink. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <title>Button With Href</title>
</head>
<body>
  <button>
    <a href="https://www.how2html.com" style="text-decoration: none; color: white;">Visit how2html.com</a>
  </button>
</body>
</html>

Output:

HTML Button Href

In this code snippet, the <a> tag with the href attribute is placed inside the <button> element. Styles can be applied to the <a> tag to make it visually appear as a button.

Method 3: Using CSS cursor: pointer

You can also style a <div> or <span> element to look like a button and use CSS to change the cursor to a pointer when hovered over. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <title>Button With Href</title>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-align: center;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="button" onclick="window.location.href='https://www.how2html.com'">Visit how2html.com</div>
</body>
</html>

Output:

HTML Button Href

In this code snippet, the .button class is styled to look like a button with blue background color and white text. The cursor: pointer property is used to change the cursor to a hand pointer when hovering over the div element.

Method 4: Using form Element

If you want to submit a form when a button is clicked and redirect the user to a new URL, you can use a hidden form element with the action attribute set to the desired URL. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <title>Button With Href</title>
</head>
<body>
  <form id="redirectForm" action="https://www.how2html.com" method="GET">
    <button type="submit">Visit how2html.com</button>
  </form>
</body>
</html>

Output:

HTML Button Href

In this code snippet, when the button is clicked, the form is submitted with a GET request to the URL specified in the action attribute.

Method 5: Using <input> Type Button

You can also create a button with an href attribute using an <input> element with type="button" and an onclick event to redirect the user to a new URL. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <title>Button With Href</title>
</head>
<body>
  <input type="button" value="Visit how2html.com" onclick="window.location.href='https://www.how2html.com'">
</body>
</html>

Output:

HTML Button Href

This code snippet demonstrates how to use an <input> element of type button to create a clickable button that redirects the user to the specified URL.

By using these methods, you can create buttons in HTML that behave like hyperlinks and redirect users to different URLs when clicked. Experiment with the examples provided to see how you can customize the buttons to suit your needs.

Like(0)

HTML Articles