html - bootstrap image button
링크처럼 작동하는 HTML 버튼을 만드는 방법은 무엇입니까? (20)
링크 역할을하는 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>
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" />
@ 니콜라스, 다음과 같은 나를 위해 일한 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>
용도:
<a href="http://www..com/">
<button>Click me</button>
</a>
유감스럽게도이 마크 업은 HTML5에서 더 이상 유효하지 않으며 유효성을 검사하거나 항상 예상대로 작동하지 않습니다. 다른 접근법을 사용하십시오.
이 작업을 수행하는 유일한 방법은 (BalusC의 독창적 인 폼 아이디어를 제외하고) JavaScript onclick
이벤트를 버튼에 추가하는 것입니다.이 방법은 접근성에 좋지 않습니다.
버튼과 같은 일반적인 링크의 스타일을 고려 했습니까? 그런 방식으로 OS 별 버튼을 구현할 수는 없지만 여전히 가장 좋은 방법입니다.
제출 된 답변이 많았지 만 그 중 아무도 실제로 문제를 해결하지 못하는 것 같습니다. 해결책을 제시합니다.
- OP가 시작되는
<form method="get">
메소드를 사용하십시오. 이것은 실제로 잘 작동하지만 가끔은?
URL에.?
주요한 문제입니다. - JavaScript가 활성화되어있을 때 jQuery / JavaScript를 사용하여 다음과 같은 링크를 수행
?
URL에 추가되지는 않습니다. 자바 스크립트를 사용할 수없는 극소수의 사용자를 위해<form>
메소드로 완벽하게 대체 될 것입니다. - JavaScript 코드는 이벤트 위임을 사용하므로
<form>
또는<button>
앞에 이벤트 리스너를 연결할 수 있습니다. 이 예제에서는 jQuery를 사용하고 있습니다. 쉽고 빠르기 때문에 'vanilla'JavaScript에서도 사용할 수 있습니다. - 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>
여기는 바이올린 :
이미지 배경과 함께 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>