본문 바로가기
생활일기/tip tech

CSS를 이용한 유용성 높은 버튼

by 신일석 2007. 9. 20.
IE6, IE7, FireFox2에서의 적용 예

/fk080000000035.jpg" width="500" height="200" />
/gk080000000040.jpg" width="500" height="200" />
/gk080000000039.jpg" width="500" height="200" /> 
먼저, CSS 스타일입니다.
※ 마우스오버의 효과는 IE7과 FireFox에서만 작동합니다.


두번째, span과 input을 이용한 버튼파일입니다.

CSS를 이용해 유용성이 높은 버튼을 만들어 보자

한글이 좋다^^



마지막으로 이미지는 총4장이 필요하죠. 마우스오버를 사용하지 않을 경우는 2장이면 됩니다.
buttonLO_02.gif (입력할 글자수가 많은 경우를 위해 길레 만들어 둡니다.)
/ek080000000037.gif" width="500" height="23" />
buttonL_02.gif (입력할 글자수가 많은 경우를 위해 길레 만들어 둡니다.)
/ek080000000036.gif" width="500" height="23" />
buttonRO_02.gif
/gk080000000041.gif" width="13" height="23" />
buttonR_02.gif
/ek080000000038.gif" width="13" height="23" />

'생활일기 > tip tech' 카테고리의 다른 글

XHTML1.1의 표준 문서 구조  (0) 2007.09.20
동적 클래스 목록  (0) 2007.09.18
OOP와 타임라인을 이용한 절차지향 프로그래밍 가이드라인  (0) 2007.09.18