html - bootstrap image button




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

HTML

평범한 HTML 방식은 action 속성에서 원하는 타겟 URL을 지정하는 <form> 에 넣는 것입니다. 

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

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

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

CSS

CSS가 허용되면 단순히 <a> 를 사용하여 다른 appearance 중에서 appearance 속성을 사용하는 단추 모양으로 스타일을 지정하십시오 ( Internet Explorer 지원은 현재 (2015 년 7 월)만이 여전히 열악 함 ). 

<a href="http://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="http://google.com" class="btn btn-default">Go to Google</a>

자바 스크립트

자바 스크립트가 허용되면 window.location.href 설정합니다. 

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

링크 역할을하는 HTML 버튼을 만들고 싶습니다. 따라서 버튼을 클릭하면 페이지로 리디렉션됩니다. 가능한 한 접근성이 좋기를 바랍니다.

URL에 추가 문자 나 매개 변수가 없도록하기를 바랍니다.

이것을 어떻게 할 수 있습니까?

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

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

하지만이 문제는 Safari 와 Internet Explorer 에서 URL 끝에 물음표 문자를 추가한다는 것입니다. URL 끝에 아무 문자도 추가하지 않는 솔루션을 찾아야합니다.

이 작업을 수행하는 다른 두 가지 해결책이 있습니다. JavaScript 사용 또는 링크 모양의 단추 모양입니다.

JavaScript 사용 : 

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

그러나 분명히 자바 스크립트가 필요하기 때문에 스크린 리더는 접근하기 어렵습니다. 링크의 요점은 다른 페이지로 이동하는 것입니다. 따라서 링크와 같은 버튼 동작을 만드는 것은 잘못된 솔루션입니다. 내 제안은 링크를 사용 하여 단추 모양으로 스타일을 지정해야한다는 것 입니다. 

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

@ 니콜라스, 다음과 같은 나를 위해 일한 type="button" 때문에 제출 유형으로 행동을 시작하지 않았다 ... 나는 이미 하나 submit.it을 가지고 있기 때문에 나를 위해 일하지 않았다 .... 그리고 지금은 버튼에 클래스를 추가하거나 필요한 레이아웃을 얻기 위해 <a> 에 클래스를 추가 할 수 있습니다. 

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

그것은 실제로 매우 간단하고 어떤 폼 요소도 사용하지 않고 있습니다. <a> 태그 내부에있는 버튼을 사용할 수 있습니다.

이렇게 : 

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

그리고 href가 같은 페이지에로드 될 것입니다. 새 페이지를 원하십니까? 그냥 target="_blank" .

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

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

그게 다야. 그것은 매우 쉽게 할 수 있고 당신이 원하는만큼 창의적이게 해줍니다. 색상, 크기, 모양 (반경) 등을 조절할 수 있습니다. 자세한 내용은 내가 찾은 사이트를 참조하십시오.

다음과 같은 일을 할 때 단점이 있습니까? 

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

여기서 a.nostyle 은 링크 스타일 (표준 링크 스타일을 제거 할 수있는 곳)이있는 클래스이고 span.button 은 "버튼"(배경, 테두리, 그라데이션 등)의 스타일을 가진 클래스입니다. .

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

예를 들어, ASP.NET 핵심 구문 : 

// 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>

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

요소 주위에 a 태그를 넣으면됩니다. 

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

https://jsfiddle.net/hj6gob8b/

용도: 

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

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

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

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

제출 된 답변이 많았지 만 그 중 아무도 실제로 문제를 해결하지 못하는 것 같습니다. 해결책을 제시합니다.

  1. OP가 시작되는 <form method="get"> 메소드를 사용하십시오. 이것은 실제로 잘 작동하지만 가끔은 ? URL에. ? 주요한 문제입니다.
  2. JavaScript가 활성화되어있을 때 jQuery / JavaScript를 사용하여 다음과 같은 링크를 수행 ? URL에 추가되지는 않습니다. 자바 스크립트를 사용할 수없는 극소수의 사용자를 위해 <form> 메소드로 완벽하게 대체 될 것입니다.
  3. JavaScript 코드는 이벤트 위임을 사용하므로 <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://.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>

BalusC의 답변에 관해서는, 

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

버튼에 변수를 추가해야하고 어떻게해야할지 확신이 들지 않았습니다. 나는 숨겨진 입력 형식 을 사용하여 끝났다. 나는 이것이 나 자신처럼이 페이지를 찾은 다른 사람들에게 도움이 될 것이라고 생각했다.

<a></a> <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>

여기는 바이올린 :

JS 피들

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

버튼을 다운로드 버튼으로 사용하려는 경우 

<a href="${link}" download><input type="button" id="btnDownload" value="Download Image"></input></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>

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

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

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

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



bootstrap   html   button   hyperlink   anchor   htmlbutton  


htmlbutton