GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)
-   Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)
-   -   Tech Quick HTML Question <button></button> (https://gfy.com/showthread.php?t=1348545)

Publisher Bucks 09-22-2021 01:52 PM

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.

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>


:1orglaugh

sarettah 09-22-2021 03:06 PM

Quote:

Originally Posted by blackmonsters (Post 22916457)
Why make it harder?


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


:1orglaugh

This ^^^^^

.

Colmike9 09-22-2021 03:07 PM

Quote:

Originally Posted by blackmonsters (Post 22916457)
Why make it harder?


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


:1orglaugh

lol nice :upsidedow

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 (Post 22916473)
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 (Post 22916508)
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


All times are GMT -7. The time now is 01:19 AM.

Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
©2000-, AI Media Network Inc123