단추를 링크처럼 만드는 방법은 무엇입니까?

단추를 링크처럼 만드는 방법은 무엇입니까?

나는 CSS를 사용하여 버튼을 링크처럼 만들어야 합니다.변경은 완료되었지만 클릭하면 버튼처럼 눌러진 것처럼 표시됩니다.버튼을 클릭해도 링크 역할을 할 수 있도록 제거하는 방법을 알고 계십니까?

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<button> your button that looks like a link</button>

트위터 부트스트랩을 사용하는 것이 괜찮다면 링크 클래스를 사용하는 것을 제안합니다.

<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는 앵커와 버튼이 동일한 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"]요소들 또한.특정 단추만 앵커 모양으로 만들려면 클래스를 사용할 수도 있습니다.

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

또한 기본 앵커 스타일이 버튼(예: 파란색 텍스트 색상)에 적용됩니다.따라서 앵커 & 버튼의 텍스트 색상이나 다른 색상을 변경하려면 위의 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;
}

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

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

링크 및 클릭 시 이벤트 사용에 대해 편집합니다(인라인 자바스크립트 이벤트 핸들러를 사용하면 안되지만, 단순성을 위해 여기서 사용할 것입니다).

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

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

Javascript가 비활성화되면 링크는 일반 링크로 작동하고 로드됩니다.some/page.php—js가 비활성화되어 있을 때 링크가 비활성화되도록 하려면 사용합니다.href="#"

브라우저 전체에서 단추를 링크로 안정적으로 스타일을 지정할 수 없습니다.시도해봤지만, 일부 브라우저에서는 항상 이상한 패딩, 여백 또는 글꼴 문제가 발생합니다.단추가 단추처럼 보이도록 사용하거나 클릭하여 링크에서 기본값을 방지합니다.

아래 예시와 같이 간단한 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>

저는 이것이 아주 적은 줄로 매우 쉽게 할 수 있다고 생각합니다.이것이 나의 해결책입니다.

.buttonToLink{
   background: none;
   border: none;
   color: red
}

.buttonToLink:hover{
   background: none;
   text-decoration: underline;
}

<button  class="buttonToLink">A simple link button</button>

 button {
  text-decoration: underline;
  cursor: pointer;
  }

 <button onClick="javascript:window.location.href='link'">Domain</button>

언급URL : https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link