버튼을 링크처럼 보이게 만드는 방법은 무엇입니까?

CSS를 사용하여 버튼을 링크처럼 보이게 만들어야합니다. 변경이 완료되었지만 클릭하면 마치 버튼처럼 눌린 것처럼 표시됩니다. 버튼을 클릭해도 링크로 작동하도록 제거하는 방법에 대한 아이디어가 있습니까?

허용되는 답변의 코드는 대부분의 경우 작동하지만 실제로 링크처럼 작동하는 버튼을 얻으려면 약간 더 많은 코드가 필요합니다. Firefox (Mozilla)에서 포커스가있는 버튼 스타일을 얻는 것이 특히 까다 롭습니다.

다음 CSS는 앵커와 버튼이 동일한 CSS 속성을 가지며 모든 일반 브라우저에서 동일하게 작동하도록합니다.

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

위의 예제는 button가독성을 높이기 위해 요소를 수정 하기 만하지만 수정 input[type="button"], input[type="submit"]및 input[type="reset"]요소 를 쉽게 확장 할 수 있습니다 . 특정 버튼 만 앵커처럼 보이게하려면 클래스를 사용할 수도 있습니다.

라이브 데모는 이 JSFiddle 을 참조하십시오 .

또한 기본 앵커 스타일이 버튼 (예 : 파란색 텍스트 색상)에 적용됩니다. 따라서 텍스트 색상이나 앵커 및 버튼의 다른 것을 변경하려면 위의 CSS 후에이 작업을 수행해야합니다 .

이 답변의 원래 코드 (스 니펫 참조)는 완전히 다르고 불완전했습니다.

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

트위터 부트 스트랩을 사용하지 않는다면 링크 클래스 를 사용하는 것이 좋습니다 .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

나는 이것이 누군가에게 도움이되기를 바랍니다 :) 좋은 하루 되세요!

CSS 의사 클래스를 사용해보십시오 :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

링크 및 onclick 이벤트 사용에 대해 편집하십시오 (인라인 자바 스크립트 이벤트 핸들러를 사용해서는 안되지만 간단하게하기 위해 여기에서 사용합니다).

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

this.href를 사용하면 함수의 링크 대상에 액세스 할 수도 있습니다. return false클릭하면 브라우저가 링크를 따라 가지 못하게됩니다.

자바 스크립트가 비활성화 된 경우 링크가 일반 링크로 작동합니다 그냥로드 some/page.php당신이 당신의 연결이 원하는 - 경우 죽은 JS가 비활성화 사용 때href="#"

브라우저 전체에서 버튼을 링크로 안정적으로 스타일 지정할 수 없습니다. 나는 그것을 시도했지만 일부 브라우저에는 항상 이상한 패딩, 여백 또는 글꼴 문제가 있습니다. 버튼을 버튼처럼 보이게하거나 링크에서 onClick 및 preventDefault를 사용하십시오.

아래 예제와 같이 간단한 CSS를 사용 하여이 작업을 수행 할 수 있습니다

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>