요즘 블로그를 이사하면서 다듬는 재미를 누리고 있습니다.
그 재미 중 하나인, 연결고리(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 아닐까 싶기도 합니다.
해피맥에서 녹색 둥글린 단추가 있는 곳은 기능이 있는 곳입니다. 검색이나 댓글 달기나 분류 등등.
'블로그 관리기록' 카테고리의 다른 글
안녕, 마이 우분투 (0) | 2014.03.24 |
---|