html - Whole of button not clickable -

as can see in jsfiddle when try , click button , not 'more' link doesn't work.

http://jsfiddle.net/cm5e8/

scss

button { padding: 8px 20px; border: 0; @include border-radius(6px); font-size: 0.8em; text-transform: uppercase; float: right; cursor: pointer; display: block;   {     display: block;     color: white;     text-decoration: none; } }  .green { background: #9fd468; display: block;  &:hover {     background: #ace175; }  &:active {     @include box-shadow (inset 2px 2px 1px #759f49); } } 

html

<button class="green">     <a href="<?php the_permalink(); ?>">more</a> </button> 

the <a> tag around text in button, in order make whole button clickable, need wrap <a> tag around button. here's code:

<a href="<?php the_permalink(); ?>">     <button class="green">more</button> </a>