Can you actually put a link over <button> tag?-CodePudding

So, I've been using HTML5 for a long time, and a while ago, I was making my project (login/register page project), I wanted to make a button that whenever I click the button, it'll redirect me to another HTML page, now I know about the <a></a> tag. And I know I can make the <a></a> tag as a button using bootstrap 5. But can you put a link in <button></button> tag?

Maybe using Javascript? And if there is a way to do that, can you explain how it works to me?

CodePudding user response：

It's better to just do an tag that is styled like a button.

<a href="/[YOUR LINK HERE]" >Button</a>

And then style your button

.button {
    width: 60px;
    height: 30px;
    color: white;
    background: blue;
    font: Arial 12px;
}

And whatever other style properties you need

CodePudding user response：

You can do that.

But I guess it's semantically is wrong.

<a href="link-here">
  <button>Click here</button>
 </a>

According to MDN buttons can have like a parent any element that is type phrasing content. And the tag <a></a> isn't that type. But are a note from MDN:

A few other elements belong to this category (phrasing content), but only if a specific condition is fulfilled: <a>, if it contains only phrasing content

And <button> is Phrasing Content. So you can do this.

I let here my suggestion:

function openLink(url) {
  window.open(url, '_blank')
}

<button onclick="window.open('URL HERE', '_blank')">Click here</button>
<h1>Or</h1>
<button onclick="openLink('URL HERE')">Click here</button>

Attempt to window.location will load a new page at the same tab, and with window.open() open a new tab or browser window.

See: Window.location
Window.open()
<a>: The Anchor element

CodePudding user response：

Me who is a backend developer, it's been quite a while since I've done a bit of css, thank you for warming my fingers in this pleasure which is rare for me!

Among other things, here is a small snippet, illustrating your request from a div. Sorry I'm not a designer haha, but it does the job well :)

Enjoy!

P.s: Don't forget to click the button.

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

button.addEventListener("click", () => {
    document.location.href = "https://stackoverflow.com/questions/73256000/can-you-actually-put-a-link-over-button-tag";
});

body {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
#button {
    background-color: rgb(81, 224, 200);
    color: white;
    font-size: 25px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 160px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
#button:hover {
    background-color: rgb(70, 197, 176);
}
#button:active {
    background-color: rgb(59, 172, 153);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="button">CLICK</div>
</body>
</html>

CodePudding user response：

you can't put a link in the <button></button> tag, but there is how you can redirect the browser url in javascript:

const url = "/[your url]";

const button = document.querySelector("button[type='button']");
button.addEventListener("click", event => {
  event.preventDefault();
  window.location = url;
});

<button type="button">button</button>