[css] html 링크를 단추처럼 보이게하려면 어떻게합니까?

Program / 글쓴이

ASP.NET을 사용하고 있는데 일부 버튼은 리디렉션 만 수행합니다. 차라리 일반 링크 였지만 사용자가 모양에 큰 차이를 느끼지 않기를 바랍니다. 태그로 앵커로 둘러싸인 이미지를 고려했지만 버튼의 텍스트를 변경할 때마다 이미지 편집기를 실행하고 싶지는 않습니다.

답변

이 클래스를 적용하십시오

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>

스 니펫 확장

답변

버튼 요소 주위에 앵커 태그를 감쌀 이유는 무엇입니까?

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

이것은 IE9 +, Chrome, Safari, Firefox 및 Opera에서 작동합니다.

답변

IMHO, 더 좋고 더 우아한 솔루션이 있습니다. 귀하의 링크가 다음과 같은 경우 :

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

해당 버튼은 다음과 같아야합니다. 

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

이 방법은 간단한 html 요소를 사용하기 때문에 더 간단하므로 아무 것도 변경하지 않고 모든 브라우저에서 작동 합니다. 또한 버튼 스타일이있는 경우이 솔루션은 새 버튼에 동일한 스타일을 무료로 적용합니다.

답변

CSS3 appearance속성은 브라우저의 내장 스타일로 모든 요소 (앵커 포함)의 스타일을 지정하는 간단한 방법을 제공 <button>합니다.

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>

스 니펫 확장

CSS 트릭 에는 이에 대한 자세한 내용이 포함 된 멋진 개요가 있습니다. caniuse.com에 따르면 현재 Internet Explorer 버전에서는이를 지원하지 않습니다 .

답변

a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

<a>블록 표시를 제공하면 이와 같은 태그로 재생할 수 있습니다 . 테두리 느낌을 조정하여 해당 버튼 느낌에 대한 음영 효과와 배경색을 제공 할 수 있습니다. 🙂

답변

둥근 모서리가있는 멋진 버튼을 원한다면이 클래스를 사용하십시오.

.link_button {
    -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);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}
<a href="#" class="link_button">Example</a>

스 니펫 확장

답변

TStamper가 말했듯이 CSS 클래스를 적용하고 디자인 할 수 있습니다. CSS가 링크로 할 수있는 일의 수가 향상됨에 따라 이제는 테마를위한 놀라운 CSS 버튼을 만드는 데 중점을 둔 디자인 그룹이 있습니다.

예를 들어, -webkit-transition 속성 및 pseduo-classes를 사용하여 배경색으로 전환 할 수 있습니다. 이러한 디자인 중 일부는 상당히 까다로울 수 있지만 과거에는 플래시로 수행했을 수 있었던 것에 대한 환상적인 대안을 제공합니다.

예를 들어 (제 생각 에는 눈에 띄는 )
http://tympanus.net/Development/CreativeButtons/ (원본 페이지에 소스 코드가 포함 된 버튼에 대한 기본적으로 제공되는 일련의 애니메이션입니다) ).
http://www.commentredirect.com/make-awesome-flat-buttons-css/ (동일한 줄에이 버튼은 훌륭하지만 최소한의 전환 효과가 있으며 새로운 “플랫”디자인 스타일을 사용합니다.)