Link inside button is clickable, but not the button itself-CodePudding

I have a button in which there is a link. When I mouseover the button, the cursor changes, but clicking the button doesn't do anything. Instead I have to click the link inside. How can I reformat my code, so that the button itself is clickable and not just the link inside of it?

<button  role="alert" style="margin:30px;" >
       <a href="https://www.google.com/"></a>
</button>

CodePudding user response：

You can use Onclick button event.

 <button onclick="window.location.href='https://www.google.com/'"></button>

CodePudding user response：

So basically, it's not getting you anywhere simply because there is no content (text, icon, image, etc) within the anchor tag to click on.

Try the code below and you should be taken to the link specified in the "href" attribute of the anchor tag.

<button role="alert" style="margin: 30px;" > <a href="https://www.google.com/" style="text-decoration: none;">Search on Google</a> </button>