access URL from button click in HTML

Question

I have written the code like below:

<button class="btn post-btn">Read More &nbsp;
<a href="https://sway.office.com/iDYEqw?ref=Link"></a> 
<i class="fas fa-arrow-right"></i></button>

However, when i click the button, its redirecting to website.But the button image and text inside it is getting larger.

My Modified code:

<a href="https://sway.office.com/iDYEqw?ref=Link" class="btn post-btn">Read More &nbsp;</a> 
                            <i class="fas fa-arrow-right"></i></button>



enter code here

How to correct this? Thanks.

Well, you got a new issue now? Because it is completely different from your original post. — SMAKSS
– SMAKSS, Commented Jul 11, 2020 at 18:16
Please keep in mind, if one of the answers works for you, please mark them as the answer to help other peeps in the community to find their solution easier if they facing the same issue. You can do this by using grey marks (tick) beside answers (you can only choose one), for more information please read this. — SMAKSS
– SMAKSS, Commented Jul 14, 2020 at 17:51

SMAKSS · Accepted Answer · 2020-07-11 18:27:15Z

This is not how the button works, you should either use <a> tag alone or create an onclick event for your button to do the redirect for you, or you can wrap your button inside a form and set the form action to your desired URL.

You can also wrap your button within a <a> which is not recommended at all, because according to W3C.org HTML docs it is not a standard way. A similar question about wrapping <button> inside <a> in SO.

Using <a> tag alone. Then you can style it like a button to make more sense.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<a href="https://sway.office.com/iDYEqw?ref=Link">Read More &nbsp;<i class="fas fa-arrow-right"></i></a>

Using <button> with onclick. Then you can redirect to your desired page with changing window.location.href value.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  window.location.href = "https://sway.office.com/iDYEqw?ref=Link"
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<button class="btn post-btn">Read More &nbsp;
<i class="fas fa-arrow-right"></i></button>

Wrap <button> inside the form. Then set the form action to your desired URL.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<form action="https://sway.office.com/iDYEqw?ref=Link" method="GET">
  <button>Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
</form>

Maimas2 · Accepted Answer · 2020-07-11 18:12:01Z

0

This is a simple fix. You just have to put the button inside the a element, and a bit of CSS to make it look normal.:

a {
color: black;
text-decoration: none;
}

<a href="https://sway.office.com/iDYEqw?ref=Link">
  <button class="btn post-btn">Read More &nbsp;
</a> 
<i class="fas fa-arrow-right"></i></button>

answered Jul 11, 2020 at 18:12

Maimas2

98110 silver badges29 bronze badges

Collectives™ on Stack Overflow

access URL from button click in HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related