[CSS3] 연결고리를 깔끔한 단추로 만들자.

요즘 블로그를 이사하면서 다듬는 재미를 누리고 있습니다.

그 재미 중 하나인, 연결고리(link)를 아래처럼 단추(button)로 만드는 방법을 공개합니다. 

연결고리 단추

그림 한 장 안쓰고  CSS3를 응용하는 방법입니다. 공개라고 할 것도 없이 사실 굉장히 많이 쓰이는 방법이기도 합니다. 

/* button 버튼: 적용은 <a href="#" class="button green">Button</a> */ .button {border:Solid 1px ; -moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;text-align: center; text-decoration: none; font: bold 12pt/100% 나눔고딕, 맑은 고딕, Helvetica; padding: 8px 32px 8px;} .button:hover {text-decoration: none; } .button:active { position: relative; top: 1px;}

/* 녹색 */ .green { color: #e8f0de; border: solid 1px; background: #90BB09; } .green:hover { background: #538018;} .green:active { color: #a9c08c;}

위 내용을 보면 크게 단추 모양을 정의한 부분과 색을 정의해 주는 부분으로 나뉩니다. .

색을 바꾸고 싶으면, 녹색 부분에서 background 의 색을 바꿔주면 됩니다. 첫줄은 기본색, 두번째줄(hover)은 마우스 포인터를 올렸을 때 색입니다.

본문에 단추를 넣을 때는 HTML 입력상태로 해서 아래 처럼 넣게 됩니다.

<a href=“주소” class= “button green”> 연결고리 단추 </a>

녹색 외에도 다른 색을 정의하면 여러가지 단추를 만들어쓸 수 있습니다. 2010년 이래로 이런 단추의 색 중 가장 유명한 색은 애플사가 쓰는 #5195CE 아닐까 싶기도 합니다. 

해피맥에서 녹색 둥글린 단추가 있는 곳은 기능이 있는 곳입니다. 검색이나 댓글 달기나 분류 등등.