Rollover Text Button


Home > Document > Web design > Menu > Button > Rollover text button

Text를 이용한 rollover button 만들기

Rollover text button 이란 rollover image button과 마찬가지로 mouse event, keyboard event 등이 발생할 때 button text의 색깔이나, button의 border-color 등을 변화시키는 button을 말합니다. 그러므로 색상이 다양한 만큼 수 없이 많은 종류의 button을 만들 수 있습니다. Rollover text button의 장점이라면 뭐니 뭐니해도 수정하기가 쉽다는 것입니다. Rollover image button의 경우, 보기는 좋을지(그것도 하기에 따라 꼭 좋으라는 법도 없지만) 몰라도 변경사항을 수정한다는 측면에서는 많은 손질을 요하기 때문이죠. 제가 개인적으로 가장 선호하는 button이 바로 rollover text button입니다. 이 페이지에서는 아래와 같은 rollover text button을 sample로 사용하겠습니다.

이 button을 event 별 동작으로 구분하여 사용된 CSS property와 같이 나열하면 아래와 같이 정리가 되겠군요.

Mouse event 별 button 모양
button 모양 Mouse event 별 CSS property & value
border : 2px solid #555555;
color : #c0c0c0;
width : 80px;
height : 26px;
font : 11px verdana;
text-align : center;
border : 2px solid #cccccc;
color : #ffffcc;
width : 80px;
height : 26px;
font : 11px verdana;
text-align : center;
cursor : pointer;


소스 보기

이번 페이지에서 다루어 본 rollover text button은 어두운 색의 background-color를 사용하는 문서에 사용하면 적당할 것이라 생각하고 만들어 본 button입니다. 따라서 여러분들도 각자의 페이지에 맞게 글자, 배경색, border 등의 색상을 수정하면 보기 좋은 button을 만들 수 있으리라 보고, 잘 된 button이 있으면 게시판에 올려 같이 공유하면 좋겠죠?




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색