버튼 전체를 클릭 할 수 없음

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

랩 앵커 태그의 버튼 버튼 링크되도록.

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