웹마스터 팁

XE에서 버튼 부분이 사라져 이 곳에서는 테스트가 어렵습니다.

양해 부탁드립니다.

WebEngine[Tip]

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

1. 내 사이트에 넣어보자!

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

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

/* btn25 */
.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>
공식버튼2 예제
<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> - 기본
공식버튼2 예제
<span class="btn25 blue">~~~</span> - 파랑(보라)
공식버튼2 예제
<span class="btn25 black">~~~</span> - 검정
공식버튼2 예제

 
5. 저건 파란색이 아니라 보라색인데?
그래서 있는게 색상 변경 버젼입니다.
파일 첨부한 btn25_2.gif의
이름을 btn25.gif로 바꿔서 올리시면 됩니다.

파일 미리보기

btn25.gif
btn25.gif

btn25_2.gif
btn25_2.gif