[css] html 링크를 단추처럼 보이게하려면 어떻게합니까?
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/ (동일한 줄에이 버튼은 훌륭하지만 최소한의 전환 효과가 있으며 새로운 “플랫”디자인 스타일을 사용합니다.)
