How to make a button go to a link

Question

I am trying to make a button that goes to a link. So I have the current code:

onEvent("button27", "click", function() {
/* stuff for a link goes here */
});

What do I do to do this? I was thinking something like

setURL("id");

But I am not sure. Help is appreciated!

Try [`window.location = url`](https://developer.mozilla.org/en-US/docs/Web/API/Window/location). — Tigger, Mar 10 '19 at 22:51
You're generally better off just making a link (`` element) rather than a button. You can style the link to look like a button easily enough. The advantage of links is that users can hover over the link with their mouse and see where the link goes before clicking it. — Robin Zigmond, Mar 10 '19 at 22:59
And, using a ‘’ is semantically correct and provides better accessibility — Scott Marcus, Mar 10 '19 at 23:09

score 0 · Answer 1 · answered Mar 10 '19 at 23:25

0

Trying an input:

<input type=button value="insert button text here" onClick="self.location='Your_URL_here.htm'">

Or:

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

I think it should work

answered Mar 10 '19 at 23:25

Teo Díaz santamans

21
3

score 0 · Answer 2 · answered Mar 10 '19 at 23:29

There are several ways to approach this.

Use a custom event handler.

<button type="button" id="button27">Go to website</button>

// Create the redirect handler
function handleRedirect(){
    window.location = "your website here";
}

// Make sure the DOM content is loaded
document.addEventListener("DOMContentLoaded", function(event) {
    const btn = document.getElementById("button27");

    // Create a custom event listener
    btn.addEventListener("click", handleRedirect, false);
});

After the page is loaded in, Javascript will listen for click events on the button with id button27. Then trigger the redirect handler.

Use a function.

<button type="button" id="button27" onclick="setURL('your website here');">Go to website</button>

// Create the setURL function
function setURL(url){
    window.location = url;
}

This gives you a little more control as you can re-use the function for multiple buttons. Although of course this is also possible using a custom event handler albeit perhaps a bit trickier.

Style an anchor link as a button.

.anchorBtn {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
 background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
 background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
 background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
 background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
 background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
 background-color:#33bdef;
 border:1px solid #057fd0;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px -1px 0px #5b6178;
}
.anchorBtn:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
 background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
 background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
 background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
 background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
 background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
 background-color:#019ad2;
}
.anchorBtn:active {
 position:relative;
 top:1px;
}

<a href="your website here" class="anchorBtn">Go to website</a>

This last solution doesn't require Javascript at all and again, the CSS class is re-useable on other buttons.

Linear gradients have been standard for nearly 5 years now. There is no reason to vendor prefix them. — Scott Marcus, Mar 11 '19 at 00:21
@Max0815 I litterly gave you all the code you need for that. All you have to do is copy / paste it. If you don't know where to do that, perhaps it would be a good idea to learn the basics before you start playing around with this. — icecub, Mar 11 '19 at 19:01
@icecub no need to be so rude. I try to understand the code before doing it. I don’t understand some of it, and how to create some required steps, and when I run, there is an error even when I put parameters in. — Max0815, Mar 12 '19 at 15:20
@Max0815 I'm not being rude. Or at least it wasn't intended as such. What I ment is that programming is just like swimming. You can't dive into the ocean without getting your swimming certificates first. You'll simply drown. You won't try to understand the Pythagorean theorem if you don't know it's used for a right triangle either. So learn the basics, then move on to more advanced stuff :) — icecub, Mar 12 '19 at 19:40

How to make a button go to a link

2 Answers2