[CSS] <button> 배경이미지 및 텍스트 숨김

<button> 배경이미지 및 텍스트 숨김  CSS  2012/04/23 17:03 http://blog.naver.com/jeioi/80158542470

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> 배경이미지 및 텍스트 숨김|작성자 방글이