링크 관련 버튼

<a href=" class="button"><span>뒤로가기</span></a>

Form 관련 버튼

<span class="button red"><input type="submit" value="" hidefocus="hideFocus"></span>

클랙스 뒤에 다음과 같은 속성 추가가 가능합니다.

button 은 기본으로 넣구요~ 그 뒤로~

예) button red small

관련 클랙스는 xe설치폴더/common/css/button.css 열어보시면 되겠습니다.

/* Large Size */
span.button.large { background-position:left -30px;}
span.button.large button,
span.button.large input { height:30px; padding:0 10px 0 8px; font:16px/30px Sans-serif; background-position:right -30px;}
/* xLarge Size */
span.button.xLarge { background-position:left -65px;}
span.button.xLarge button,
span.button.xLarge input { height:35px; padding:0 10px 0 8px; font:20px/36px Sans-serif; background-position:right -65px;}
/* Small Size */
span.button.small { background-position:left -107px;}
span.button.small button,
span.button.small input { height:18px; padding:0 6px 0 4px; font:11px/18px Sans-serif; background-position:right -107px;}

/* Color Preset */
a.button.green,
a.button.green span,
span.button.green,
span.button.green button,
span.button.green input { background-image:url(../tpl/images/buttonGreen.gif); color:#fff;}
a.button.black,
a.button.black span,
span.button.black,
span.button.black button,
span.button.black input { background-image:url(../tpl/images/buttonBlack.gif); color:#fff;}
a.button.red,
a.button.red span,
span.button.red,
span.button.red button,
span.button.red input { background-image:url(../tpl/images/buttonRed.gif); color:#fff;}
a.button.blue,
a.button.blue span,
span.button.blue,
span.button.blue button,
span.button.blue input { background-image:url(../tpl/images/buttonBlue.gif); color:#fff;}