Почему тег «a href» при клике на него не работает?
Очуметь, и вправду - слепая область в пару пикселей.  Немного поигравшись с примером пришел к выводу, что проблема в следующем:
- перед кликом, в слепой области, курсор находится над `а` (но не над текстом! `padding`)
- во время клика кнопка уходит вниз (`:active `) и курсор наезжает на текст
- и клик не отрабатывает, потому что нажатие началось над `а`, закончилось над текстом.
Такой же эффект, если мы при `:active` сдвигаем кнопку через `relative/top` а не через `margin`. codepen. Заметьте, что слепая область при `top:8` увеличилась на 8px. 
Лечим через pointer-events codepen
Но мне кажется, что такое поведение заслуживает баг репорта, или кто-то имеет больше информации по этому поводу?
Мне из хрома не удалось воспроизвести этот баг. Под текстом всю область обкликал :)