Целая кнопка не может быть нажата

Question

Как вы можете видеть в JSFiddle, когда вы пытаетесь нажать кнопку, а не «Больше», ссылка не работает.

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; 


a { 
    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> 

Answer 1

<a> тег только вокруг текста в кнопке, поэтому для того, чтобы сделать всю кнопку кликабельным, вам нужно обернуть <a> тег вокруг кнопки. Вот код:

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

Answer 2

Wrap кнопку в теге привязки так, чтобы кнопка является ссылкой.

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