슬라이딩 도어 기술을 활용한 버튼 디자인 그래픽 튜토리얼_체험교류

이 글은 번역된 글입니다. 전문 주소: http://diger.cn/article.asp?id=351
원본 주소: http://www. ilamentgroup.com /lab/buttonElement/

Particle Tree는 최근 버튼 요소를 디자인하기 위해 생각해낸 기술을 설명하는 기사를 게시했습니다. 숙련되지 않은 분들을 위해 테이블 ​​버튼이라는 이름이 나왔습니다. 맞춤화가 어렵습니다. 일반적인 해결 방법은 브라우저에서 제공하는 기본 버튼을 사용하거나 그래픽 입력을 사용하는 것입니다. 그래픽 입력이 원하는 결과를 완료하면 "Baked-in"이라는 텍스트가 포함된 각 버튼에 대해 새 그래픽 생성을 요청합니다(호버로 교체한다는 언급 없음).

Particle Tree의 기술은 안정적인 솔루션을 제공하지만 우리의 요구를 충족할 수는 없습니다. 양식을 스크롤하거나 제출하는 데 JavaScript가 필요하지 않은 실제 HTML 텍스트인 슬라이딩 도어 기술을 사용하는 버튼이 필요합니다. 이러한 조건을 충족한다는 것은 입력 요소와 앵커 요소가 제외된다는 의미입니다. 분명히 버튼 요소가 유일한 선택입니다. 다음 기술은 슬라이딩 도어 기술을 사용한 크로스 브라우저 버튼 기술을 보여줍니다.


데모 보기 🎜>
CSS:
프로그램 코드는 다음과 같습니다.

IE6 및 IE7용 CSS(때때로 필수)

<button value="submit" class="submitBtn"><span>Submit</span></button>

코드는 다음과 같습니다.

보시다시피 각 상태마다 2개의 이미지가 사용됩니다. (총 4개의 이미지) 더 단순화하면 이러한 상태는 두 가지로 변환될 수 있습니다. 그러나 아이디어에 대한 초기 테스트에서는 일관되지 않은 결과가 나타났습니다. 브라우저 지원:

IE6, IE7, Firefox(mac/pc), Safari, Opera, Camino 등

button {   
  border:0;   
  cursor:pointer;   
  font-weight:bold;   
  padding:0 20px 0 0;   
  text-align:center;   
}  
button span {   
  position:relative;   
  display:block;   
  white-space:nowrap;   
  padding:0 0 0 20px;   
}  
/*blue buttons*/  
button.submitBtn {   
  background:url(images/btn_blue_right.gif) right no-repeat;   
  font-size:1.3em;   
}  
button.submitBtn span {   
  height:50px;   
  line-height:50px;  
  background:url(images/btn_blue_left.gif) left no-repeat;  
  color:#fff;   
}  
button.submitBtn:hover {  
    background:url(images/btn_blue_right_hover.gif) right no-repeat;   
}  
button.submitBtn:hover span {  
    background:url(images/btn_blue_left_hover.gif) left no-repeat;   
}

경고: IE6에서 마우스 오버가 작동하려면 클래스 트리거를 작성해야 합니다. 그래도 사진 교환만큼 나쁘지는 않습니다.
위는 미닫이문 기술을 활용한 버튼 디자인 그래픽 튜토리얼_체험교류 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

button {   
  width:auto;   
  overflow:visible;   
}  
button span {   
  margin-top:1px;   
}