css3으로 만들 수 있는 깔끔한 버튼스타일

css3으로 이걸 한번 만들어볼까요? 아시겠지만, css3으로 적용된 스타일은 적용이 안되는 브라우저가 있을 수 있습니다. 물론, [code]<--[if IE 6]>[/code]이걸 이용해서 ie6나, 혹은 특정 브라우저별로 스타일을 따로 정해줄 수도 있습니다만... 아무튼 css3을 이용한 스타일은ie를 제외(!)하고, '대부분(?)'의 브라우저에서 확인이 가능합니다. 예전같았으면, 포토샵에서 하나하나 만들었을텐데... (...)

 그럼 한번 만들어 볼까요?[code].button, .button:visited { background: #000 url(투명오버레이png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; }[/code]이게 모체가 되는 스타일입니다. 참고로 moz와 webkit은 쉽게 말해, moz는 모질라기반, webkit은 사파리, 크롬을 위한 스타일값입니다. 고로, moz와 webkit은 스타일을 각각 따로 정의해줘야 되는 값입니다.

 몇개만 간단히 간단하게 설명하면, 'background'에 배경이미지를 넣는데, 원래 스타일에 투명한 오버레이 이미지를 덮어 조금 스무드한 효과를 낼 수 잇습니다. 'display: inline-block'는 아시다시피, 인라인 요소처럼 흐르면서 블록 요소 처럼 width, height, padding, margin등을 사용 할..... 모르시는 분은, 인라인블럭값을 빼고 적용해보고, 또 넣고 적용해보며 알아가면 좋겠네요. '-moz/-webkit-border-radius'는 얼마만큼 둥그렇게 깍아줄지(?) 결정하는 값입니다. 높아질 수록 버튼이 둥글둥글해집니다. 저는 적당히 5px를 줬습니다. '-moz/-webkit-box-shadow'는 버튼 주위에 음영을 얼마나, 그리고 무슨색으로 주는지 결정합니다.

그리고, 우선 버튼에 들어가는 기본 값을 정해놨으면, 여기서 더 해야 할건 'hover, active, visited'등의 마우스가 올라갔을 때, 클릭했을 때 등의 값을 정해줘야합니다. 이미지로 정해준게 아니라서 css로 또 정해줘야 합니다.

[code].button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .button, .button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }[/code]저는 이런식으로 버튼값을 줬습니다. 그럼 한번 볼까요, 어떻게 적용되는지? 만들어진 예제는 아래처럼 뿌려집니다. 크롬이나 파이어폭스 등, ie를 제외한 css3이 사용가능한 브라우져에선 아래 예제가 잘 보입니다. ie에서보면 그냥 그저그런 네모박스에 불과합니다만.. 아, 아무튼.. 참...... 쉽죠잉!? '-')v

Waaagh!!

Waaagh!!

Waaagh!!

Waaagh!! 

Waaagh!! 

요기 쓰인 overlay.png를 따로 첨부합니다. *다른 이름으로 저장!