Making a button a clickable link (With a twist)

Question

So I have a snippet that I'm using to build some buttons.

<a href="http://google.com"><font color=white><button  class="button"><span>Register</span></button></font></a>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>

As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed

Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!

Any suggestions?

I'm not sure if they will fix anything, but button elements need a type="button" otherwise they default to type="submit" — Benneb10, Jul 18 '17 at 16:03
Does it need to be an actual button element? You could just style your to look like a button. — mcgraphix, Jul 18 '17 at 16:03
Why are you wrapping them in an anchor tag that takes precedence on the click? You have to either ditch the , or use *external* event handlers to prevent the default action from happen when you click the buttons. That will prevent the a href from triggering. — Sterling Archer, Jul 18 '17 at 16:03
Have a look here. I believe this is addressing your problem:https://stackoverflow.com/questions/3144050/use-css-to-make-a-span-not-clickable — Daniel, Jul 18 '17 at 16:05
What do you actually *want* these buttons to do? Should they each link to a different URL? — Daniel Beck, Jul 18 '17 at 16:11

score 0 · Answer 1 · answered Jul 18 '17 at 16:12

The purpose of a button is to either:

Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")

As you can see I have tried wrapping the whole thing in href

The HTML specification forbids that.

I have tried wrapping the span in href

The span appears to serve no purpose

Every button is a clickable but EVERY button simply links back to the page i'm currently working on

If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).

If you want a link then use a link and do not use a button.

If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.

score 0 · Answer 2 · answered Jul 18 '17 at 16:14

0

The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.

The easiest way is to apply CSS and add the class to your span tags.

span.nonclickable {
    pointer-events: none;
}

After that you can catch the button clicks. A more detailed explanation can be found here: Use CSS to make a span not clickable

It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.

answered Jul 18 '17 at 16:14

Daniel

4,816
3
27
31

If I remove the Span I lose the action of the button, when hovering it is to do a certain maneuver to show you are hovering it, removing Span removes the action – John Ammons Jul 18 '17 at 16:20
I can't see your CSS to see what effects you have on the span tags. It does seem to me that you are having just text. Why not remove the span tag and put your hover effect on the button itself. Better yet, if you just link to a href attribute, just take an a-tag and style it to your liking. – Daniel Jul 18 '17 at 16:29

score -1 · Answer 3 · edited Jul 19 '17 at 14:00

-1

You could try this :

<input type="button" onclick="myF()" />

<script>
  function myF() {
    window.open('http://www.google.com', '_blank', 'resizable=yes');
  }
</script>

Hope it helps

edited Jul 19 '17 at 14:00

shabeer90

5,161
4
47
65

answered Jul 18 '17 at 16:59

Making a button a clickable link (With a twist)

3 Answers3