Clickable area in buttons with CSS

Question

I am looking at this example: http://codepen.io/benague/pen/bCkyr

.btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}

When you click these buttons at the very top, it doesn't really grab the link, but they still get animated.

How can I increase the clickable area so that whenever it animates, it actually goes to the URL?

Thank you.

Answer 1

Add this to your css:

#buttons a {
  -webkit-transform: scaleY(1) translateZ(-1px);
}

CodePen: http://codepen.io/anon/pen/EyYmvJ

---

Reason for the link not fully clickable could be because the transform property on your active buttons kind of moved the anchor link a bit.

---

The issue here: Clickable link area unexpectedly smaller after CSS transform is simlar to yours so check out the correct answer there to get a better explanation regarding the transform property affecting the position of the anchor link and also regarding the fix.

Answer 2

For me it is working properly. But if I understand you right you want to remove the padding of the link. You could use to remove the padding: 15px 25px; from .btn and work with

a {
 height: 60px;
 width: 160px;
}

or something