Quick HTML Question <button></button>
 

Is it possible to make this element clickable to open a URL instead of a form field? If so how would I go about doing that?

I've checked here ( https://www.w3schools.com/tags/tag_button.asp ) but can't figure out how (or if) that is even possible after doing a little playing with the code :/

Thanks.

Well on that W3Schools page change: "alert('Hello world!')" to "window.open('https://www.duckduckgo.com')", like:

<button type="button" onclick="window.open('https://www.duckduckgo.com')">Click Me!</button>

I've done it this way before:
Basically the same, but window.open in yours opens the link in a new window I think.

Perfect, thank you both for the help, I was messing up the onclick element :)

Why make it harder?


<a href="https://google.com"><button type="button">Click Me!</button></a>


:1orglaugh

This ^^^^^

.

lol nice :upsidedow

btw just putting <a> around <button> isn't valid HTML5

You can nest <a> around elements except for these:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)

OK cool. But that's more about not putting link tags when you have also added the "onClick script". That creates a conflict. My example removes the conflict.

But why even bother to use a button like that when you can just style the link itself?


<style>
.link {
padding:5px;
font-size:20px;
color:white;
background:blue;
border-radius:7px;
border:solid magenta 1px;
text-decoration:none;
}
.link:hover{
color:yellow;
background:magenta;
box-shadow: 0px 0px 5px 0px #999999;
}
.link:active{
color:darkgreen;
background:yellow;
}
</style>

<br>

<a class="link" href="https://google.com/">Google</a>



:)

idk, I mostly just use regular text links.. :upsidedow