더 나은 링크 버튼을 조언과 거짓 솔루션을 보내 주시기 바랍니다

Question

HTML 링크 요소

<a href="#"></a> 

뿐만 아니라 버튼 요소가

책임은 다르지만 ... 때로는 설계 실제로

<button></button> 

그들을 원하는 똑같아. 리셋 디스플레이, 여백, 패딩, 테두리, 배경, 글꼴 등 옆에 정확하게 똑같은 스타일로 표시 할 단서가 없습니다 ... 끝 부분에서 동일하게 보이지 않고 때로는 서로를 기본값으로 고정시킵니다. 위치 지정 속성.

않도록 아래에있는 내 초기 솔루션 : 링크 디자이너의

예는 버튼과 같은 링크보기를 원한다. 나는 링크에 버튼을 싸서!

<a href="#"><button class="coolbutton">look cool</button></a> 

저는이 솔루션을 좋아합니다. 특히 버튼을 스타일링하기가 훨씬 쉽습니다. 다음을 클릭하고 링크에 태그 의지 응답

지금 형태의 예 : 형식과 버튼 옆에 링크를 제출하기위한 버튼을 누릅니다. 그들은 똑같이 보일 필요가있다. 링크 버튼은 양식을 제출해서는 안됩니다. 하지만 양식 안에 ...

<a href="#"><button class="coolbutton onclickreturnfalse">I just want to link it</button></a> 
<button> Submit </button> 

클래스는 자바 스크립트 클릭 이벤트에 바인드 어쨌든 false를 돌려 .onclickreturnfalse 있습니다. 그래서 양식을 제출하지 않습니다 ...하지만 문제는 .. 링크에 거짓 반환 .. 그래서 링크가 작동하지 않습니다 ...

내 가난한 설명과 제목 죄송합니다. 나는 지금 약간의 의견이 필요하다. 웹 디자이너가 어떻게 이러한 문제를 해결할 수 있습니까? #

그래서 내가

심각 #

button,a.bt1,a.bt2,a.bt3{ 
border: 1px solid rgba(152, 152, 152, 0.1);border-radius: 2px;color: #666666;cursor: pointer; 
font-size: 8pt;font-weight: bold;min-width: 54px;padding: 4px 8px;text-align: center; 
} 
button,button.bt1,a.bt1 { background-color: #F5F5F5; } 
button.bt2,a.bt2  { background-color: #F5F5F5; color:#BF0000; } 
button.bt3,a.bt3  { background-color: #BF0000; color:#EFEFEF; } 
button:hover,a.bt1:hover,a.bt2:hover,a.bt3:hover{ 
border: 1px solid rgba(208, 0, 0, 0.1); text-decoration:none; 
} 

가 ... 서로 다른 좀 봐 여기 내 CSS를 넣어 :(

Answer 1

당신은 어느해야 버튼이나 앵커를 사용하지만 나는 왜 당신이 링크 안의 버튼을 사용하는지 알지 못한다. 앵커의 스타일을 지정하여 버튼처럼 보이게하거나 단순히 버튼을 사용하고 클릭 이벤트를 처리 할 수있다.

예를 들어, cli 이 링크를 클릭해도 포스트 백이 발생하지 않습니다 (브라우저에서 JS를 사용할 수 있음). <a href="#" class="coolbutton" onclick="alert('test'); return false;" />