링크처럼 작동하는 HTML 버튼을 만드는 방법은 무엇입니까?

링크처럼 작동하는 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 방식은 속성 <form>에 원하는 대상 URL을 지정하는 곳에 넣는 것입니다 action.

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

필요한 경우 display: inline;양식에 CSS 를 설정 하여 주변 텍스트와의 흐름을 유지하십시오. <input type="submit">위의 예 대신을 사용할 수도 있습니다 <button type="submit">. 유일한 차이점은 <button>요소가 어린이를 허용 한다는 것 입니다.

직관적으로 요소 <button href="https://google.com">와 유사하게 사용할 수 <a>있지만 HTML 사양 에 따라이 속성은 존재하지 않습니다 .

CSS

CSS가 허용되면 단순히 <a>스타일을 사용하여 appearance속성을 사용하는 버튼처럼 보이게하십시오 ( 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>요소가 어린이를 허용 한다는 것 입니다.

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

결 측값 기본값은 제출 단추 상태type="button" 이므로 속성이 중요 합니다.

기본 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) 샘플 모양 :

사용하다:

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

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

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

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

경고

• <form>태그 로 묶어야합니다.
• <button>type은 "submit"(또는 지정되지 않음)이어야합니다. "button"형식으로 작업 할 수 없습니다. 아래에 요점이 있습니다.
• 양식의 기본 조치를 대체합니다. 즉, 다른 양식에서이 작업을 수행하면 충돌이 발생합니다.

참조 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction 브라우저 지원 : https://developer.mozilla.org/en-US/docs/Web/ HTML / 요소 / 버튼 #Browser_compatibility

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

이처럼 :

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

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

편집하다

몇 년 후 내 솔루션이 여전히 작동하는 동안 많은 CSS를 사용하여 원하는대로 보이게 할 수 있습니다. 이것은 단지 빠른 길이었습니다.

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

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

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

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

해결 방법 1 : 양식의 단추.

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

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

http://someserver/pages2?

이를 해결하는 한 가지 방법이 있지만 서버 측 구성이 필요합니다. Apache Mod_rewrite 를 사용하는 한 가지 예 는 후행이있는 모든 요청을 . ?없이 해당 URL 로 리디렉션 하는 것 ?입니다. 다음은 .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를 사용하여 클릭시 및 기타 이벤트를 트리거하여 단추를 사용하여 링크의 동작을 모방 할 수 있습니다. 아래 예제는 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보다 선호됩니다.

어떤 이유로 액세스 가능성이 중요하지만 (자바 스크립트는 옵션이 아님) 설계 및 / 또는 서버 구성으로 인해 옵션 # 1을 사용하지 못하고 솔루션 # 3을 사용하지 못하는 경우 ( 버튼 스타일의 앵커 ) 사용성에 미치는 영향을 최소화하면서이 문제를 해결하는 좋은 대안입니다.

버튼을 참조 태그 안에 넣으면 안됩니다. 예 :

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

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

물론 이것을 폼 태그로 감쌀 수는 있지만 반드시 그럴 필요는 없습니다.

다른 로컬 파일을 링크 할 때는 파일을 같은 폴더에 넣고 파일 이름을 참조로 추가하십시오. 또는 동일한 폴더에 파일이없는 경우 파일 위치를 지정하십시오.

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

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

내 프로젝트 구조가 ...

..는 폴더를 나타냅니다. 파일은 4 개이며 | 상위 폴더의 하위 디렉토리 또는 파일을 나타냅니다.

..public
|||| ..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 = xxxxxxxxxxxxxx x는 자신의 연결에 의해 결정되므로 분명히 내 것과 같지 않습니다.

실제로 몇 가지 기본 사항을 언급하는 것처럼 보이지만 가능한 한 최대한 설명하고 싶습니다. 읽어 주셔서 감사합니다. 최소한 누군가에게 도움이되기를 바랍니다. 행복한 프로그래밍.

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

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

https://jsfiddle.net/hj6gob8b/

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

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

다른 사람들이 추가 한 내용과 함께 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>

그게 다야. 작업하기가 매우 쉽고 원하는만큼 창의력을 발휘할 수 있습니다. 색상, 크기, 모양 (반경) 등을 제어 할 수 있습니다. 자세한 내용은 에서 찾은 사이트를 참조하십시오 .

폼이나 입력을 사용하지 않고 버튼 모양의 링크를 찾고 있다면 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> 디스플레이 : 인라인 테이블 및 <h1> 디스플레이 : 테이블 셀을 만들 수 있습니다. <h1>에서 세로 정렬 : 중간을 사용하고 세로로 가운데에 배치 할 수 있습니다 (항상 좋은 위치). 단추). 예, 패딩을 사용할 수 있지만 버튼의 크기를 동적으로 조정하려면 깨끗하지 않습니다.

4. 때로는 div 내에 <a>를 포함시킬 때 텍스트 만 클릭 할 수 있으며이 설정으로 전체 버튼을 클릭 할 수 있습니다.

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

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

가변 크기의 화면을위한 모바일 웹 사이트 스타일링이 더 쉬워졌습니다.

type="button"@Nicolas , 다음은 제출 유형으로 동작하기 시작한 것이 아니기 때문에 나를 위해 일했습니다 .. 나는 이미 하나의 제출 유형을 가지고 있기 때문에. 버튼 또는 <a>필요한 레이아웃을 얻으려면 :

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

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

<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;}

데모를 만들었습니다 .

어디에서나 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;
}

나는 많은 답변이 제출되었음을 알고 있지만 실제로 문제를 해결하지는 못했습니다. 여기 해결책이 있습니다.

1. <form method="get">OP가 시작 하는 방법을 사용하십시오 . 이것은 실제로 잘 작동하지만 때로는 ?URL 에 a 를 추가합니다 . 은 ?주요 문제입니다.
2. jQuery / JavaScript를 사용하여 JavaScript가 활성화되어 ?URL에 추가되지 않는 링크를 수행하십시오 . <form>JavaScript를 사용하지 않는 소수의 사용자를위한 방법으로 완벽하게 대체됩니다 .
3. 전과은 이벤트 리스너를 부착 할 수 있도록 자바 스크립트 코드는 이벤트 위임을 사용 <form>하거나 <button>심지어는 존재한다. 이 예제에서는 jQuery를 사용하는데 빠르고 쉽습니다. 그러나 'vanilla'JavaScript에서도 수행 할 수 있습니다.
4. 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 (e.g. 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>

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>

이미지 배경과 함께 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>

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

예를 들어 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>

SSL 인증서를 사용중인 경우

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

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

그러나 최근에 내부에 링크를 사용할 때 문제가 발생했습니다 <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 Button Generator

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

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

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

JS 피들

나는 현재 작업중 인 웹 사이트에 이것을 사용했으며 훌륭하게 작동합니다!. 멋진 스타일링을 원한다면 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을 여기에서 사용하십시오 .

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

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

예:

<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에서 아직 테스트하지 않았습니다.

당신은 자바 스크립트를 사용할 수 있습니다

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

</html>

http://www.google.com웹 사이트로 교체 http://하고 URL 앞에 포함 시키십시오.

자바 스크립트에서

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

HTML에서

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

브라우저 콘솔에서 입력 window.location하고 누르 enter십시오. 그럼 당신은 location포함 하는 명확한 아이디어를 얻을 수 있습니다

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/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>

그래디언트 이미지에 중점을 둔 버튼처럼 보이는 것이 필요한 경우 다음을 수행 할 수 있습니다.

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

귀하의 웹 사이트에있는 페이지를 리디렉션하려면 여기 내 방법이 있습니다-속성 href 를 버튼에 추가하고 onclick을 this.getAttribute ( 'href') 를 document.location.href에 할당했습니다.

** 'X-Frame-Options'에서 'sameorigin'으로 인해 도메인 외부에서 URL을 참조하면 작동하지 않습니다.

샘플 코드 :

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>