[CSS] <button> 배경이미지 및 텍스트 숨김
<button> 배경이미지 및 텍스트 숨김  CSS 2012/04/23 17:03 |
CSS 적용
button {border:0 none;padding:0;margin:0;background:transparent;*overflow:visible;cursor:pointer;}
button::-moz-focus-inner {border:0;padding:0;} /* firefox 여백방지 */
/* <butto>초기화 설명
background:transparent; 회색배경 없애기
overflow:visible; IE6~7 여백버그 해결
cursor:pointer; 손 커서
*/
/* <button> 배경이미지 적용 & 텍스트 삭제*/
.clacel {width:75px;height:27px;background:url('이미지경로') no-repeat;}
span {visibility:hidden;}
HTML 사용
<button type="button" name="" id="" onfocus="this.blur()" class="cancel"><span>취소하기</span></button></div>
------------------------------------
기타 참고
<button> 기본 활용
- type 선택 가능 (submit, reset, button *기본은 submit)
1.이미지 요소
<label for="">로그인 버튼</label>
<button type="button" name="" id="">
<img src="img/btn.gif" alt="로그인" />
</button>
2.텍스트 요소
<label for="">로그인 버튼</label>
<button type="button" name="" id="">로그인</button>
3.스타일을 이용하여 background이미지+텍스트숨김
<button>요소 링크 걸기
1.기존창
<button type="button" onclick="location.href('#');" name="" id="" >로그인</button>
2.새창
<button type="button" onclick="window.open('#');" name="" id="" >로그인</button>
3.팝업
<button type="button" onclick="window.open('#','','width=500,height=500');return false;" name="" id="" >로그인</button>
버튼요소의 장점: 텍스트 요소, 이미지 요소 포함 가능
<label for=""> <button id=""> 웹 폼 컨트롤에 대한 설명
<button type="button"> 버튼요소로 자바스크립트 실행 (그 외 submit,reset)
<button name=""> 버튼 이름 명시
<button onclick=""> 버튼 요소에 링크걸기
<button onfocus="this.blur()"> 점선모양 테두리 삭제, 버튼눌림 방지
<button title=""> 툴팁 지정
[출처] <button> 배경이미지 및 텍스트 숨김|작성자 방글이