버튼을 링크처럼 보이게하려면 어떻게해야합니까? 텍스트 장식 밑줄/아래쪽 테두리

Question

버튼을 앵커 태그처럼 보이게하려면 어떻게해야합니까?

아래 HTML을 시도했지만 버튼 위로 마우스를 가져 가면 아래쪽 테두리가 다른 앵커 태그처럼 보이지 않습니다. 테두리 하단은 텍스트 아래 약 3px 인 반면 앵커 태그에서는 그 사이에 1px 밖에 없습니다.

나는 링크 만 사용 하겠지만, 버튼이 의미 상으로는 내 상황에 맞을 것이라고 읽었습니다.

<style> 
.epUnsubscribe { 
    float: left; 
} 

    .epUnsubscribe button { 
     background: none!important; 
     border: none; 
     padding: 0!important; 
     cursor: pointer; 
     border-bottom: 1px solid #ffffff; 
     color: #5C8C9B; 
    } 

     .epUnsubscribe button:hover { 
      border-bottom: 1px solid #5C8C9B; 
     } 
</style> 

<div style="float: left" class="epUnsubscribe"> 
     <button id="BtnUnsubscribe">Unsubscribe</button> 
    </div> 

Answer 1

그것은 하이퍼 링크에 테두리 아니라,이 밑줄이며,이 시도 : 그들이 가지고,

.epUnsubscribe button:hover { 
    border: none; 
    text-decoration: underline; 
} 

Answer 2

실제 링크를 사용하고 그것을 onclick="..." 콜백을 사용하여 일부 버튼 기능을 제공하는 것이 더 쉬울 수 있습니다.

Answer 3

링크 하단의 국경이없는 요소를주기

text-decoration:underline