WebEngine[Tip]

XE공식 버튼2 삽입하기 입니다.
이건 원래 배포가 안되어 있어서 XpressEngine 공식 사이트에서만 사용이 가능했는데요.
카르마님의 미배포 게시판 스킨에서 사용되길래 올려봅니다.

1. 내 사이트에 넣어보자!
우선 첨부한 이미지를 다운받아서 [ ./common/css/ ] 에 저장해 주세요. (파일 이름은 반드시 btn25.gif 로 해 주세요.)
그리고 [ ./common/css/button.css ] 를 수정합니다.

아무곳이나 상관 없는데 알아보기 쉽게 하는게 좋을거에요.

.btn25, .btn25 a, .btn25 button, .btn25 input{display:inline-block;height:25px;line-height:25px;padding:0;margin:0;overflow:visible;position:relative;background:url(btn25.gif) no-repeat;cursor:pointer} .btn25{background-position:0 0;margin:0 2px 0 0;vertical-align:top} .btn25 a, .btn25 button, .btn25 input{padding:0 12px;left:2px;font-size:12px;color:#4a4a4a;font-weight:bold;border:0;background-position:right 0;text-decoration:none} .btn25.blue{background-position:0 -30px} .btn25.blue *{background-position:right -30px !important;color:#fff !important} .btn25.black{background-position:0 -60px} .btn25.black *{background-position:right -60px !important;color:#fff !important}

를 넣습니다.

2. 어떻게 사용하지?
<span class="btn25"><button>공식버튼2 예제</button></span>

<span class="btn25"><input type="button" value="공식버튼2 예제"></span>

<span class="btn25"><input type="submit" value="공식버튼2 예제"></span>

IE와 오페라를 제외하면 대부분 다 버튼효과가 안나타 납니다.

3. 링크를 걸수는 없을까?
<span class="btn25"><a href="http://xpressengine.com">공식버튼2 예제</a></span>
공식버튼2 예제
단, 버튼 눌림 효과가 나타나지 않습니다.

4. 색상은 바꿀수 없을까?
<span class="btn25">~~~</span> - 기본

<span class="btn25 blue">~~~</span> - 파랑(보라)

<span class="btn25 black">~~~</span> - 검정
 
5. 저건 파란색이 아니라 보라색인데?
그래서 있는게 색상 변경 버젼입니다.
파일 첨부한 btn25_2.gif의
이름을 btn25.gif로 바꿔서 올리시면 됩니다.

btn25.gif

btn25_2.gif