Tech Quick HTML Question <button></button> - GoFuckYourself.com

Publisher Bucks · 09-22-2021, 01:52 PM

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 · 09-22-2021, 01:57 PM

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 · 09-22-2021, 02:03 PM

I've done it this way before:

Code:

<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 · 09-22-2021, 02:40 PM

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

blackmonsters · 09-22-2021, 02:42 PM

Why make it harder?

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

sarettah · 09-22-2021, 03:06 PM

Quote:

Originally Posted by blackmonsters

Why make it harder?

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

This ^^^^^

.

Colmike9 · 09-22-2021, 03:07 PM

Quote:

Originally Posted by blackmonsters

Why make it harder?

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

lol nice

Colmike9 · 09-22-2021, 03:31 PM

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 · 09-22-2021, 05:44 PM

Quote:

Originally Posted by 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)

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 · 09-22-2021, 06:14 PM

Quote:

Originally Posted by blackmonsters

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

09-22-2021, 01:52 PM	#1
Publisher Bucks Confirmed User Industry Role: Join Date: Oct 2018 Location: New Orleans, Louisiana. / Newcastle, England. Posts: 1,225	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.

09-22-2021, 01:57 PM	#2
ZTT Confirmed User Industry Role: Join Date: Apr 2019 Posts: 657	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> __________________ __________________

09-22-2021, 02:03 PM	#3
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	I've done it this way before: Code: <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. __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

09-22-2021, 02:42 PM	#5
blackmonsters Making PHP work Industry Role: Join Date: Nov 2002 Location: 🌎🌅🌈🌇 Posts: 20,645	Why make it harder? <a href="https://google.com"><button type="button">Click Me!</button></a> __________________ Get paid, get tools, get going with Camsoda Join Chaturbate get your cut of the pie

09-22-2021, 03:31 PM	#8
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	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) __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

09-22-2021, 02:40 PM	#4
Publisher Bucks Confirmed User Industry Role: Join Date: Oct 2018 Location: New Orleans, Louisiana. / Newcastle, England. Posts: 1,225	Perfect, thank you both for the help, I was messing up the onclick element