Tech Quick HTML Question <button></button>

[Publisher Bucks]

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.

[ZTT]

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>

[Colmike9]

I've done it this way before:

<style>
        .buttonlink {
 //Style Stuff Yourself
        }
    </style>
/head

    <button class="buttonlink" 
    onclick="window.location.href = 'https://your.link';">
        Link Text in button
    </button>

Basically the same, but window.open in yours opens the link in a new window I think.

[Publisher Bucks]

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

[blackmonsters]

Why make it harder?


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

[sarettah]

Why make it harder?


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

This ^^^^^

.

[Colmike9]

Why make it harder?


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

lol nice

[Colmike9]

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)

[blackmonsters]

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>

[Colmike9]

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..