HTML button only redirect when clicking the text inside-CodePudding

Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using

    <div >
  <div >
    <div >
      <h1>RAID 2 EARN</h1>
      <h2>TECHNOLOGY</h2>
      <p>We make it easy!</p>
      <button ><a href="raid2earn.html">Get Started</a></button>
    </div>
    <div >
      <img id="main__img" src="/IMGS/picture1.svg"/>
    </div>
  </div>
</div>

CodePudding user response：

It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:

<a  href="raid2earn.html">Get Started</a>

This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.

CodePudding user response：

Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link

CodePudding user response：

Actually, every html element has a job.

<a> for connecting to outer files

<button> for the inside actions

And you can style everyone as you want.

But:

if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.

In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:

<a href="#">
    <button>Click the button now</button>
</a>

This one is just the easiest.

And there are many others in html and css and javascript.

But again, you must use every element in its own purpose.