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

Program / 글쓴이

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>

스 니펫 확장

답변

허용되는 답변의 코드는 대부분의 경우 작동하지만 실제로 링크처럼 작동하는 버튼을 얻으려면 약간 더 많은 코드가 필요합니다. 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 후에이 작업을 수행해야합니다 .

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

코드 스 니펫 표시

답변

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

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

스 니펫 확장

여기에 이미지 설명을 입력하십시오

답변