Graphical tutorial on designing buttons using sliding door technology_Experience exchange

this article is a translated article, full text address: http://diger.cn/article.asp? id=351
original address: http://www.filamentgroup.com/ lab/buttonelement/

particle tree recently published an article describing a technique they came up with for designing button elements. for those unskilled, table buttons are notoriously difficult to customize. typical solutions are to use the default buttons provided by the browser, or to use a graphical input. when the graphics input completes the desired result, it requests the creation of a new graphics for each button with its text "baked-in" (no mention of swapping it with hovers).

although particle tree's technology provides a reliable solution, it cannot meet our needs. we need a button that uses sliding door technology, a real html text that doesn't require javascript to scroll or submit a form. meeting these conditions means that input and anchor elements are excluded. obviously, the button element is our only choice. the following technique demonstrates a cross-browser button technique using sliding door technology.


view demo

tag:

the code is as follows:

<button value="submit" class="submitbtn"><span>submit</span></button>

css:

the program code is as follows:

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;   
}

css for ie6 and ie7 (sometimes required)
the code is as follows:

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

as you can see, each state uses 2 images (4 images total). simplifying further, these states can be transformed into two. but initial tests of the idea turned up inconsistent results.











browser support:
ie6, ie7, firefox (mac/pc), safari, opera, camino, etc.

warning: in order for hover to work in ie6, you will need to write a class trigger. not as bad as picture swapping though.

the above is the graphic tutorial on designing buttons using sliding door technology_the content of experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!