Якорь работает только в нижней половине кнопки

У меня проблема. На моем сайте. У меня есть кнопка, и когда я нажимаю ее, я хочу отправить мне другую ссылку. Но она работает, только если я нажму ее на нижнюю половину.

Это код:

<div id="button" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'">
<div id="butttop" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbottom" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbody" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttfloor" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
</div>

#button {


  height: 130px;
  width: 300px;
  margin-top:37%;
  position: absolute;
 left:50%;
 margin-left: -150px;
  cursor:pointer;

}

#button div {
  position: absolute;

}

#buttfloor {
  height: 50px;
  width: 300px;
  background: #34495e;
  border-radius: 50%;
  margin-top: 80px;
  z-index: 1;

}

#butttop {
  background: #e74c3c;
  height: 40px;
  width: 250px;
  border-radius: 50%;
  z-index:3;
  margin-left: 25px;
   -webkit-transition: all .2s;
  -moz-transition: all .2s ;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;

}

#buttbottom {
  background: #c0392b;
  height: 40px;
  width: 250px;
  border-radius: 50%;
  margin-top: 80px;
  margin-left: 25px;
  z-index:2;

}

#buttbody {
  background: #c0392b;
  height: 80px;
  width: 250px;
  border-radius: 0;
  margin-top: 20px;
  margin-left: 25px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s ;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  z-index:2;

}

#button:active #buttbody{
  height: 40px;
  margin-top: 60px;

} 

#button:active #butttop{
  margin-top: 40px;

}