링크처럼 작동하는 HTML 버튼을 만드는 방법

질문자 :Andrew

링크처럼 작동하는 HTML 버튼을 만들고 싶습니다. 따라서 버튼을 클릭하면 페이지로 리디렉션됩니다. 가능한 한 접근할 수 있도록 하고 싶습니다.

URL에 추가 문자나 매개변수가 없도록 하고 싶습니다.

어떻게 하면 달성할 수 있습니까?

---

지금까지 게시된 답변을 바탕으로 현재 다음과 같이 하고 있습니다.

 <form method="get" action="/page2"> <button type="submit">Continue</button> </form>

그러나 이것의 문제는 Safari 및 Internet Explorer 에서 URL 끝에 물음표 문자를 추가한다는 것입니다. URL 끝에 문자를 추가하지 않는 솔루션을 찾아야 합니다.

이를 위한 두 가지 다른 솔루션이 있습니다. JavaScript를 사용하거나 링크를 버튼처럼 보이도록 스타일 지정하는 것입니다.

자바스크립트 사용:

 <button onclick="window.location.href='/page2'">Continue</button>

그러나 이것은 분명히 JavaScript를 필요로 하기 때문에 스크린 리더가 접근하기가 어렵습니다. 링크의 요점은 다른 페이지로 이동하는 것입니다. 따라서 버튼이 링크처럼 작동하도록 하는 것은 잘못된 솔루션입니다. 내 제안은 링크를 사용 하고 단추처럼 보이도록 스타일을 지정해야 한다는 것 입니다.

 <a href="/link/to/page2">Continue</a>

HTML

일반 HTML 방식은 action 속성에 원하는 대상 URL을 지정 <form>

 <form action="https://google.com"> <input type="submit" value="Go to Google" /> </form>

필요한 경우 CSS display: inline; 주변 텍스트와 함께 흐름을 유지하기 위해 양식에. 위의 예에서 <input type="submit"> 대신 <button type="submit"> 을 사용할 수도 있습니다. 유일한 차이점은 <button> 요소가 자식을 허용한다는 것입니다.

<a> 요소와 유사한 <button href="https://google.com"> 을 사용할 수 있을 것으로 예상하지만 불행히도 이 속성은 HTML 사양 에 따라 존재하지 않습니다.

CSS

CSS가 허용되면 무엇 <a> appearance 속성을 사용하여 단추처럼 보이도록 스타일을 지정 하는 <a>를 사용하면 됩니다(Internet Explorer에서만 지원되지 않음 ).

 <a href="https://google.com" class="button">Go to Google</a>

 a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }

또는 Bootstrap 과 같은 많은 CSS 라이브러리 중 하나를 선택하십시오.

 <a href="https://google.com" class="btn btn-primary">Go to Google</a>

자바스크립트

JavaScript가 허용되면 window.location.href 설정하십시오.

 <input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

위의 예에서 <input type="button"> 대신 <button> 사용할 수도 있습니다. 유일한 차이점은 <button> 요소가 자식을 허용한다는 것입니다.

BalusC

 <button onclick="location.href='http://www.example.com'" type="button"> www.example.com</button>

누락된 값 기본값은 제출 버튼 상태 type="button" 속성은 중요합니다.

Adam

기본 HTML 앵커 태그에서 찾고 있는 버튼의 시각적 모양인 경우 Twitter Bootstrap 프레임워크를 사용하여 다음과 같은 일반적인 HTML 유형 링크/버튼을 버튼으로 표시하도록 형식을 지정할 수 있습니다. 프레임워크 버전 2, 3 또는 4 사이의 시각적 차이점에 유의하십시오.

 <a class="btn" href="">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit">

부트스트랩(v4) 샘플 모양:

부트스트랩(v3) 샘플 모양:

부트스트랩(v2) 샘플 모양:

Bern

사용하다:

 <a href="http://www.stackoverflow.com/"> <button>Click me</button> </a>

불행히도 이 마크업은 HTML5에서 더 이상 유효하지 않으며 잠재적으로 예상대로 유효성을 검사하거나 항상 작동하지 않습니다. 다른 접근 방식을 사용하십시오.

D'Arcy Rittich

HTML5부터 버튼은 formaction 속성을 지원합니다. 무엇보다도 JavaScript나 속임수가 필요하지 않습니다.

 <form> <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button> </form>

주의 사항

• <form> 태그로 둘러싸야 합니다.
• <button> 유형은 "제출"(또는 지정되지 않음)이어야 합니다. "버튼" 유형에서는 작동하지 않습니다. 아래의 요점을 나타냅니다.
• 양식의 기본 작업을 재정의합니다. 즉, 다른 형식 내에서 이 작업을 수행하면 충돌이 발생합니다.

참조: 형성

브라우저 지원: <button>: Button 요소

EternalHour

실제로 매우 간단하고 양식 요소를 사용하지 않습니다. 내부에 버튼이 있는 <a> 태그를 사용할 수 있습니다. :).

이와 같이:

 <a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

그리고 href를 같은 페이지에 로드합니다. 새 페이지를 원하십니까? target="_blank" 됩니다.

편집하다

몇 년 후 내 솔루션이 여전히 작동하는 동안 많은 CSS를 사용하여 원하는 모양으로 만들 수 있음을 기억하십시오. 이것은 단지 빠른 방법이었습니다.

Lucian Minea

내부 양식을 사용하는 경우 버튼 요소와 함께 type="reset" 속성을 추가합니다. 폼 작업을 방지합니다.

 <button type="reset" onclick="location.href='http://www.example.com'"> www.example.com </button>

saravanabawa

<form> <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> </form>

ghoppe

이 문제에 대한 세 가지 해결책이 있는 것 같습니다(모두 장단점이 있음).

솔루션 1: 폼의 버튼.

 <form method="get" action="/page2"> <button type="submit">Continue</button> </form>

그러나 이것의 문제는 Chrome, Safari 및 Internet Explorer와 같은 인기 있는 브라우저의 일부 버전에서는 URL 끝에 물음표 문자를 추가한다는 것입니다. 따라서 URL 위의 코드는 다음과 같이 표시됩니다.

 http://someserver/pages2?

이 문제를 해결하는 한 가지 방법이 있지만 서버 측 구성이 필요합니다. Apache Mod_rewrite 를 사용하는 한 가지 예는 모든 요청을 후행 ? ? . 다음은 .htaccess를 사용하는 예이지만 여기에 전체 스레드가 있습니다.

 RewriteCond %{THE_REQUEST} \?\ HTTP [NC] RewriteRule ^/?(index\.cfm)? /? [R=301,L]

유사한 구성은 사용되는 웹 서버 및 스택에 따라 다를 수 있습니다. 따라서 이 접근 방식을 요약하면 다음과 같습니다.

장점:

1. 이것은 실제 버튼이며 의미상 의미가 있습니다.
2. 실제 버튼이기 때문에 실제 버튼처럼 작동합니다(예: 드래그 가능한 동작 및/또는 활성 상태에서 스페이스바를 누를 때 클릭을 모방).
3. JavaScript나 복잡한 스타일이 필요하지 않습니다.

단점:

1. 후행 ? 일부 브라우저에서는 보기 흉합니다. 이것은 GET 대신 POST를 사용하는 해킹(경우에 따라)으로 해결할 수 있지만 깨끗한 방법은 서버 측 리디렉션을 사용하는 것입니다. 서버 측 리디렉션의 단점은 304 리디렉션으로 인해 이러한 링크에 대한 추가 HTTP 호출이 발생한다는 것입니다.
2. 추가 <form> 요소 추가
3. 여러 양식을 사용할 때 요소 위치 지정은 까다로울 수 있으며 반응형 디자인을 처리할 때 더욱 악화됩니다. 요소의 순서에 따라 이 솔루션으로 일부 레이아웃을 달성할 수 없게 될 수 있습니다. 디자인이 이 문제의 영향을 받는 경우 사용성에 영향을 줄 수 있습니다.

솔루션 2: JavaScript 사용.

JavaScript를 사용하여 onclick 및 기타 이벤트를 트리거하여 버튼을 사용하는 링크의 동작을 모방할 수 있습니다. 아래 예는 HTML에서 개선하거나 제거할 수 있지만 단순히 아이디어를 설명하기 위한 것입니다.

 <button onclick="window.location.href='/page2'">Continue</button>

장점:

1. 단순하고(기본 요구 사항의 경우) 추가 형식이 필요하지 않으면서 의미를 유지합니다.
2. 실제 버튼이기 때문에 실제 버튼처럼 작동합니다(예: 드래그 가능한 동작 및/또는 활성 상태에서 스페이스바를 누를 때 클릭을 모방).

단점:

1. 접근성이 떨어지는 JavaScript가 필요합니다. 이것은 링크와 같은 기본(코어) 요소에 적합하지 않습니다.

솔루션 3: 버튼 스타일의 앵커(링크).

버튼처럼 링크 스타일을 지정하는 것은 비교적 쉽고 여러 브라우저에서 유사한 경험을 제공할 수 있습니다. 부트스트랩 은 이 작업을 수행하지만 간단한 스타일을 사용하여 혼자서도 쉽게 달성할 수 있습니다.

장점:

1. 단순하고(기본 요구 사항의 경우) 우수한 크로스 브라우저 지원.
2. 작동 <form> 이 필요하지 않습니다.
3. 작동하는 데 JavaScript가 필요하지 않습니다.

단점:

1. 버튼처럼 작동하는 링크가 아니라 링크처럼 작동하는 버튼을 원하기 때문에 시맨틱은 일종의 고장입니다.
2. 솔루션 #1의 모든 동작을 재현하지는 않습니다. 버튼과 동일한 동작을 지원하지 않습니다. 예를 들어 링크는 드래그할 때 다르게 반응합니다. 또한 "스페이스 바" 링크 트리거는 일부 추가 JavaScript 코드 없이는 작동하지 않습니다. 브라우저가 버튼에 keypress 이벤트를 지원하는 방식에 일관성이 없기 때문에 복잡성이 많이 추가됩니다.

결론

솔루션 #1( 양식의 버튼 )은 최소한의 작업이 필요한 사용자에게 가장 투명해 보입니다. 레이아웃이 이 선택의 영향을 받지 않고 서버 측 조정이 가능한 경우 접근성이 최우선인 경우(예: 오류 페이지의 링크 또는 오류 메시지)에 좋은 옵션입니다.

JavaScript가 접근성 요구 사항에 장애물이 아닌 경우 솔루션 #2( JavaScript )가 #1 및 #3보다 선호됩니다.

어떤 이유로 접근성이 중요하지만(JavaScript는 옵션이 아님) 디자인 및/또는 서버 구성으로 인해 옵션 #1, 솔루션 #3을 사용할 수 없는 상황에 있는 경우( 버튼과 같은 스타일의 앵커 ) 사용성 영향을 최소화하면서 이 문제를 해결하는 좋은 대안입니다.

Nicolas Bouvrette

버튼을 참조 태그 안에 배치하기만 하면 됩니다. 예:

 <a href="https://www.google.com/"><button>Next</button></a>

이것은 저에게 완벽하게 작동하는 것으로 보이며 링크에 %20 태그를 추가하지 않고 원하는 방식으로 추가합니다. 시연을 위해 Google에 대한 링크를 사용했습니다.

물론 이것을 양식 태그로 래핑할 수 있지만 반드시 필요한 것은 아닙니다.

다른 로컬 파일을 링크할 때 같은 폴더에 넣고 파일명을 참조로 추가하면 됩니다. 또는 in이 같은 폴더에 없는 경우 파일의 위치를 지정합니다.

 <a href="myOtherFile"><button>Next</button></a>

이것은 URL 끝에 문자를 추가하지 않지만 파일 이름으로 끝나기 전에 URL로 파일 프로젝트 경로를 갖습니다. 예

내 프로젝트 구조가 ...

.. 폴더를 나타냅니다 \

• 파일을 나타냅니다
  동안 네 | 상위 폴더의 하위 디렉토리 또는 파일을 나타냅니다.

..공공의
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

main.html 파일을 열면 URL은 다음과 같습니다.

 http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

그러나 main.html 내부의 버튼을 클릭하여 secondary.html 로 변경하면 URL은 다음과 같습니다.

 http://localhost:0000/public/html/secondary.html

URL 끝에 특수 문자가 포함되지 않습니다.

그건 그렇고 - (% 20은 인코딩되어 그 자리에 삽입 된 URL의 공백을 나타냅니다.)

참고: localhost:0000 은 분명히 0000이 아닙니다. 거기에 고유한 포트 번호가 있습니다.

게다가 main.html URL 끝에 있는 ?_ijt=xxxxxxxxxxxxxxx x 는 사용자 자신의 연결에 의해 결정되므로 분명히 내 것과 같지 않을 것입니다.

제가 정말 기본적인 요점을 말하는 것처럼 보일 수도 있지만, 제가 할 수 있는 한 최선을 다해 설명하고자 합니다.

C.Gadd

단순히 요소 주위에 태그를 넣을 수 있습니다.

 <a href="http://google.com" target="_blank"> <button>My Button</button> </a>

https://jsfiddle.net/hj6gob8b/

Uriahs Victor

양식이나 입력을 사용하지 않고 버튼 모양의 링크를 찾고 있다면 div 래퍼, 앵커 및 h1 태그를 사용하여 보기 좋은 버튼 링크를 만들 수 있습니다. 페이지 주위에 링크 버튼을 자유롭게 배치할 수 있도록 잠재적으로 원할 것입니다. 이것은 특히 버튼을 가로로 가운데에 맞추고 그 안에 텍스트를 세로로 가운데에 두는 데 유용합니다. 방법은 다음과 같습니다.

버튼은 다음과 같이 div 래퍼, 앵커 및 h1의 세 가지 중첩 부분으로 구성됩니다.

 .link-button-wrapper { width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; } .link-button-wrapper > a { display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; } .link-button-wrapper > a > h1 { margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; }

 <div class="link-button-wrapper"> <a href="your/link/here"> <h1>Button!</h1> </a> </div>

여기 jsFiddle이 있어 확인하고 가지고 놀 수 있습니다.

이 설정의 이점: 1. div 래퍼 표시: 블록을 사용하면 중앙에 쉽게 정렬(여백: 0 자동 사용) 및 위치 지정(<a>은 인라인이고 위치 지정하기 어렵고 중앙 정렬할 수 없음)이 쉽습니다.

2. <a> display:block 을 만들고 이리저리 움직이고 버튼으로 스타일을 지정할 수 있지만 그 안에 텍스트를 세로로 정렬하는 것이 어려워집니다.

3. 이를 통해 <a> display: inline-table 및 <h1> display: table-cell을 만들 수 있습니다. 이를 통해 <h1>에서 vertical-align: middle을 사용하고 수직으로 가운데에 배치할 수 있습니다(항상 좋은 단추). 예, 패딩을 사용할 수 있지만 버튼의 크기를 동적으로 조정하려면 그렇게 깨끗하지 않습니다.

4. 때때로 div 내에 <a>를 포함할 때 텍스트만 클릭할 수 있습니다. 이 설정은 전체 버튼을 클릭 가능하게 만듭니다.

5. 다른 페이지로 이동하려는 경우 양식을 처리할 필요가 없습니다. 양식은 정보를 입력하기 위한 것이며 이를 위해 예약되어 있어야 합니다.

6. 버튼 스타일과 텍스트 스타일을 서로 깔끔하게 분리할 수 있습니다.

다양한 크기의 화면에 맞게 모바일 웹사이트를 스타일링하기가 훨씬 쉬워졌습니다.

MoMo

이 작업을 수행하는 유일한 방법(BalusC의 독창적인 양식 아이디어 제외!)은 onclick 이벤트를 추가하는 것입니다. 이는 접근성에 좋지 않습니다.

버튼과 같은 일반 링크 스타일을 고려한 적이 있습니까? 그런 식으로 OS 특정 버튼을 얻을 수는 없지만 여전히 IMO가 가장 좋은 방법입니다.

Pekka

몇 가지 다른 사람들이 추가한 것과 함께, PHP 없이, jQuery 코드 없이, 단순한 HTML과 CSS 없이 간단한 CSS 클래스만 사용해도 무방합니다.

CSS 클래스를 만들고 앵커에 추가합니다. 코드는 아래에 있습니다.

 .button-link { height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); } .button-link:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; } <HTML> <a class="button-link" href="http://www.go-some-where.com" target="_blank">Press Here to Go</a>

그게 다야 매우 쉽게 할 수 있으며 원하는 만큼 창의적으로 만들 수 있습니다. 색상, 크기, 모양(반지름) 등을 제어합니다. 자세한 내용은 내가 찾은 사이트를 참조하십시오.

artie

Nicolas의 답변 에 대해 다음은 해당 답변에 type="button" 이 없었기 때문에 제출 유형으로 작동하기 시작했기 때문에 다음이 저에게 효과적이었습니다. 이미 제출 유형이 하나 있기 때문입니다. 그것은 나를 위해 작동하지 않았습니다 ... 이제 버튼이나 <a> 에 클래스를 추가하여 필요한 레이아웃을 얻을 수 있습니다.

 <a href="http://www.google.com/"> <button type="button">Click here</button> </a>

Bhawna Jain

또 다른 옵션은 버튼에 링크를 만드는 것입니다.

 <button type="button"><a href="yourlink.com">Link link</a></button>

그런 다음 CSS를 사용하여 링크와 버튼의 스타일을 지정하여 링크가 버튼 내의 전체 공간을 차지하도록 합니다.

 button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}

여기에서 데모를 만들었습니다.

lukeocom

그렇게 하는 7가지 방법:

1. window.location.href = 'URL'
2. window.location.replace('URL')
3. window.location = 'URL'
4. window.open('URL')
5. window.location.assign('URL')
6. HTML 양식 사용
7. HTML 앵커 태그 사용

 <!-- Using window.location.href = 'URL' --> <button onclick='window.location.href = "https://stackoverflow.com"'> Click Me </button> <!-- Using window.location.replace('URL') --> <button onclick='window.location.replace("https://stackoverflow.com")'> Click Me </button> <!-- Using window.location = 'URL' --> <button onclick='window.location = "https://stackoverflow.com"'> Click Me </button> <!-- Using window.open('URL') --> <button onclick='window.open("https://stackoverflow.com","_self","","")'> Click Me </button> <!-- Using window.location.assign('URL') --> <button onclick='window.location.assign("http://www.stackoverflow.com")'> Click Me </button> <!-- Using HTML form --> <form action='https://stackoverflow.com' method='get'> <input type='submit' value='Click Me'/> </form> <!-- Using HTML anchor tag --> <a href='https://stackoverflow.com'> <button>Click Me</button> </a>

Adnan Toky

URL에 사용되는 버튼을 아무데나 생성하고 싶다면 앵커에 대한 버튼 클래스를 생성합니다.

 a.button { background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; } .button:hover { text-decoration: none; }

Maarek

많은 답변이 제출되었다는 것을 알고 있었지만 그 중 어느 것도 문제를 제대로 해결하지 못한 것 같습니다. 다음은 솔루션에 대한 제 의견입니다.

1. OP가 시작하는 <form method="get"> 메소드를 사용하십시오. 이것은 정말 잘 작동하지만 때때로 ? URL로 이동합니다. ? 주요 문제입니다.
2. 이 솔루션은 JavaScript를 활성화하지 않아도 작동합니다. 대체는 ? URL의 끝까지.
3. JavaScript가 활성화된 경우 jQuery/JavaScript를 사용하여 링크를 따라갈 수 있으므로 ? URL에 추가되지 않습니다. JavaScript를 활성화하지 않은 극히 일부의 사용자를 위해 <form> 메서드로 원활하게 대체됩니다.
4. JavaScript 코드는 이벤트 위임을 사용하므로 <form> 또는 <button> 이 존재하기 전에 이벤트 리스너를 연결할 수 있습니다. 빠르고 쉽기 때문에 이 예제에서 jQuery를 사용하고 있지만 '바닐라' JavaScript에서도 수행할 수 있습니다.
5. JavaScript 코드는 기본 작업이 발생하는 것을 방지한 다음 <form> action 속성에 제공된 링크를 따릅니다.

JSbin 예제(코드 스니펫은 링크를 따를 수 없음)

 // Listen for any clicks on an element in the document with the `link` class $(document).on('click', '.link', function(e) { // Prevent the default action (eg submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; });

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Form buttons as links</title> </head> <body> <!-- Set `action` to the URL you want the button to go to --> <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"> <!-- Add the class `link` to the button for the event listener --> <button type="submit" class="link">Link</button> </form> </body> </html>

pseudosavant

HTML 5 및 이미지 배경과 함께 스타일이 지정된 버튼의 경우

 <a id="Navigate" href="http://www.google.com"> <input type="button" id="NavigateButton" style=" background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png); background-repeat: no-repeat; background-position: -272px -112px; cursor:pointer; height: 40px; width: 40px; border-radius: 26px; border-style: solid; border-color: #000; border-width: 3px;" title="Navigate" /> </a>

Anees Hameed

또한 버튼을 사용할 수 있습니다.

예를 들어 ASP.NET Core 구문에서 :

 // Some other tags <form method="post"> <input asp-for="YourModelPropertyOrYourMethodInputName" value="@TheValue" type="hidden" /> <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod"> @(TextValue) </button> </form> // Other tags... <style> .link-button { background: none !important; border: none; padding: 0 !important; color: #20a8d8; cursor: pointer; } </style>

Elnaz

SSL 인증서를 사용하는 경우:

 <a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Vikash Chauhan

나는 현재 작업하고 있는 웹사이트에 이것을 사용했고 훌륭하게 작동합니다!. 멋진 스타일링을 원하신다면 여기에 CSS를 넣어두겠습니다.

 input[type="submit"] { background-color: white; width: 200px; border: 3px solid #c9c9c9; font-size: 24pt; margin: 5px; color: #969696; } input[type="submit"]:hover { color: white; background-color: #969696; transition: color 0.2s 0.05s ease; transition: background-color 0.2s 0.05s ease; cursor: pointer; }

 <input type="submit" name="submit" onClick="window.location= 'http://example.com'">

여기에서 JSFiddle 작업.

Jasch1

버튼 type-property 을 "버튼"(양식을 제출하지 않음)으로 설정한 다음 링크 안에 중첩(사용자를 리디렉션함)할 수도 있습니다.

이렇게 하면 필요한 경우 양식을 제출하는 동일한 양식에 다른 버튼을 가질 수 있습니다. 또한 양식 방법과 작업을 링크로 설정하는 것보다 대부분의 경우 이것이 바람직하다고 생각합니다(검색 양식이 아닌 한 ...)

예시:

 <form method="POST" action="/SomePath"> <input type="text" name="somefield" /> <a href="www.target.com"><button type="button">Go to Target!</button></a> <button type="submit">submit form</button> </form>

이런 식으로 첫 번째 버튼은 사용자를 리디렉션하고 두 번째 버튼은 양식을 제출합니다.

버튼이 어떤 작업도 트리거하지 않도록 주의하십시오. 충돌이 발생할 수 있습니다. 또한 Arius가 지적했듯이 위의 이유로 표준에 따르면 이것은 엄밀히 말하면 유효한 HTML로 간주되지 않는다는 점을 알아야 합니다. 그러나 Firefox 및 Chrome에서는 예상대로 작동하지만 Internet Explorer에서는 아직 테스트하지 않았습니다.

Anders Martini

<button></button> <a></a> 속성을 사용하여 답변한 사람들이 도움이 되었습니다.

그런데 <form></form> 내부의 링크를 사용할 때 문제가 발생했습니다.

버튼은 이제 제출 버튼(HTML5)과 유사합니다. 방법을 시도해 보았고 이 방법을 찾았습니다.

아래와 같은 CSS 스타일 버튼을 만듭니다.

 .btn-style{ border: solid 1px #0088cc; border-radius: 6px; moz-border-radius: 6px; -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0); box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0); font-size: 18px; color: #696869; padding: 1px 17px; background: #eeeeee; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee)); background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0); }

또는 여기에서 새 항목을 만드십시오: CSS 버튼 생성기

그런 다음 만든 CSS 스타일의 이름을 딴 클래스 태그로 링크를 만듭니다.

 <a href='link.php' class='btn-style'>Link</a>

바이올린은 다음과 같습니다.

JSFiddle

Logan Wayne

<a> 태그와 적절한 CSS를 사용하여 버튼 만들기

 .abutton { background: #bada55; padding: 5px; border-radius: 5px; transition: 1s; text-decoration: none; color: black; } .abutton:hover { background: #2a2; }

 <a href="https://example.com" class="abutton">Continue</a>

Kamil Kiełczewski

자바스크립트에서

 setLocation(base: string) { window.location.href = base; }

HTML에서

 <button onclick="setLocation('/<whatever>')>GO</button>"

Joshua Michael Calafell

JavaScript를 사용할 수 있습니다.

 <html> <button onclick='window.location = "http://www.google.com"'> Google </button> </html>

http://www.google.com 을 귀하의 웹사이트로 http:// 를 포함해야 합니다.

Hayz

window.location 을 입력 하고 브라우저 콘솔에서 Enter 키를 누릅니다. location 에 다음이 포함되는지 명확한 아이디어를 얻을 수 있습니다.

 hash: "" host: "stackoverflow.com" hostname: "stackoverflow.com" href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- that-acts-like-a-link" origin: "https://stackoverflow.com" pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link" port: "" protocol: "https:"

여기에서 아무 값이나 설정할 수 있습니다.

따라서 다른 페이지를 리디렉션하기 위해 링크로 href

 window.location.href = your link

귀하의 경우 :

 <button onclick="window.location.href='www.google.com'">Google</button>

Nasir Khan

CSS 라이브러리나 테마를 사용하는 경우 버튼의 클래스를 앵커/링크 태그에 적용하기만 하면 됩니다.

다음은 One UI 의 예입니다.

 <a class="btn-block-option" href=""> <i class="si si-reload"></i> </a>

Sosu Alfred

출처 : http:www.stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link