Don't redirect on button click with css

Question

I have a button inside a link, how can I make it so that clicking on the button will not cause a redirect, but clicking outside the button will.

<a href="http://google.com" class="block">
  <button>Don't redirect on click</button>
</a>

Is it possible to do with css only?

See here: https://jsfiddle.net/d4mr7mm6/

That's invalid markup. Interactive content is not allowed within `a` elements, and `button` is interactive content. — zzzzBov, Jan 08 '16 at 19:29
I mean, it doesn't have to be a button, feel free to change it to a `span` if that helps you solve the issue — Vic, Jan 08 '16 at 19:31
Consider using positioning to have the button *appear* over the link, alternatively, a JS callback that calls `stopPropagation` will prevent the link from being clicked. There are many ways of doing this, although the UX is questionable. — zzzzBov, Jan 08 '16 at 19:34

Andrew · Accepted Answer · 2016-01-08T20:07:49.190

1

This will provide what you are looking for. However, you will need to style the disabled button to accommodate the aesthetics. As said before in a previous post, this is not recommended.

<a href="http://google.com" class="block">
  <button type="button" disabled>Click Me!</button>
</a>

https://jsfiddle.net/d4mr7mm6/1/

edited Jan 08 '16 at 20:07

answered Jan 08 '16 at 19:38

Andrew

56
6

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

Just add a class inside you'r button with the following attributes :

<a href="http://google.com" class="block">
  <button class="no-redirect">Don't redirect on click</button>
</a>

.no-redirect{
   pointer-events: none;
   cursor: default;
}

see : Disable link using css

Also, it's illegal to nest interactive element inside an anchor.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 08 '16 at 19:27

wmehanna

394
3
15

I want it to redirect when clicked on the block, just not the button – Vic Jan 08 '16 at 19:29
I updated my answer. can you confirm if it's working for you ? – wmehanna Jan 08 '16 at 23:44

score -2 · Answer 3 · edited May 23 '17 at 12:03

-2

It isn't a good html structure, but if you want to stay with this structure I think this will work:

<a href="http://google.com" class="block" onclick="event.preventDefault();">
  <button>Don't redirect on click</button>
</a>

Don't redirect on button click with css

3 Answers3