0

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.

AskMe
  • 2,495
  • 8
  • 49
  • 102
  • Well, you got a new issue now? Because it is completely different from your original post. – SMAKSS Jul 11 '20 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](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235). – SMAKSS Jul 14 '20 at 17:51
  • Did you come up with a conclusion? – SMAKSS Jul 25 '20 at 15:22

2 Answers2

2

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>
SMAKSS
  • 9,606
  • 3
  • 19
  • 34
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>
cs1349459
  • 911
  • 9
  • 27