[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크)

<button> 버튼에 링크하는 방법, 새창으로 링크하는 방법입니다. 버튼 <button>에 링크하는 방법은 여러가지 입니다.

• <a href="#">로 링크하는 방법
• <button>에 onclick로 링크하는 방법
• <input type="button">으로 링크하는 방법
• <form> 태그에 링크하는 방법

 

html button 링크 하는 방법

 

<button>에 a 태그로 링크하는 방법

<a href="#"> 로 <button>을 감싸서 링크를 합니다.

<a href="https://amango.tistory.com" target="_blank">
	<button>
    버튼링크 방법1
    </button>
</a>

<button>으로 <a> 태그를 감싸서 링크를 합니다.

<button>
	<a href="https://amango.tistory.com" target="_blank">
		버튼링크 방법1
        </a>
</button>

<button>에 <a>태그로 링크했을 때 일부 브라우저에서 클릭이 안되는 현상이 있을 경우 onclick를 이용하세요. 👇

<button>에 onclick 로 링크하기

<button> 태그 안에  자바스크립트 onclick 속성을 사용해서 링크를 합니다.

<button type="button" onclick="location.href='https://amango.tistory.com';">에이망고 바로가기</button>

 

 

버튼 <button>에 새창으로 링크하려면 onclick="window.open('url')"을 사용하면됩니다.

<button type="button" onclick="window.open('https://amango.tistory.com');">에이망고 바로가기</button>

input type="button"에 링크하기

input type에 button 속성을 부여해서 버튼을 만들어주고 <a> 태그로 링크합니다.

<a href="https://amango.tistory.com/" target="_blank">
	<input type="button" value="에이망고 바로가기">
</a>

form action에 링크하기

<form>태그에 url을 링크하는 방식입니다.
새창으로 띄우려면  target="_blank"를 추가하면 됩니다. html 5에서는 타겟을 지원합니다.

<form method="get" action="https://amango.tistory.com">
<button type="submit">에이망고 바로가기</button>
</form>

 

<a>태그로 링크했을 때는 커서 포인트가 나오지만 나머지 input이나 form으로 링크했을 때 커서포인트가 나오지 않습니다.

<button>에 커서포인트를 넣어주세요.

<style>
	button {cursor: pointer; }
	input[type="submit"] {cursor: pointer;}
</style>

함께 보면 좋은 글

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기)

유료 이미지 사이트 BEST 12개 목록

이미지 사이즈 일괄 변경, 이렇게 쉬운 줄 몰랐다🤩

파비콘 만들기 사이트, ico 파일 생성 사이트