Using sliding door technology to design the button of the graphic tutorial _ Experience Exchange

This article is a translation 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 that describes a technique that they come up with to design button elements, and for those who are not skilled, the table keys are name-difficult to customize. A typical solution is to use the default buttons provided by the browser, or to use a graphical input. When the graphical input completes the demand result, it requests that a new graphic be created for each button with its text "baked-in" (without mentioning it with hovers exchange).

Although particle tree's technology provides a reliable solution, it does not meet our needs. We need a button that uses sliding door technology, a real HTML text that does not require JavaScript to be rolled over or submitted to a table. Satisfying these conditions means that the input and anchor elements are excluded. Obviously, the button element is our only option. The following techniques demonstrate a technique for cross-browser buttons using sliding door technology.


View Demo

Tags:

The code is as follows:

<button value= "Submit" class= "SUBMITBTN" ><span>Submit</span></button>

Css:

The program code 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 (a total of 4 images). Further simplification, these states can be converted to two. But the initial test of this idea had inconsistent results.











Browser support:
Ie6,ie7,firefox (MAC/PC), Safari,opera,camino and so on.

Warning: To make hover valid in IE6, you will need to write a class trigger. Although not as bad as the picture exchange.

The above is the use of sliding door technology Design Button Graphic Tutorial _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

