Graphic tutorial on button design with Sliding Door Technology

This article is for translation Article , Full text address: http://diger.cn/article.asp? Id = 351
Address: http://www.filamentgroup.com/lab/buttonElement/

Particle tree recently published an article describing a technology that they came up with to design button elements. Table keys are notoriously difficult to customize for unskilled people. A typical solution is to use the default button provided by the browser or use a graphical input. When the Graphic Input completes the requirement result, it requests to create a new graph for each button to use its text "baked-in" (it is not mentioned to exchange it with hovers ).

Although particle tree technology provides a reliable solution, it cannot meet our needs. We need a button that uses the sliding door technology, a real HTML text, and does not need to request JavaScript to roll or submit a table. If these conditions are met, the input and anchor elements are excluded. Obviously, the button element is our only choice. The following technology demonstrates a cross-browser button technology using the sliding door technology.

View demo

Tags:CopyCodeThe Code is as follows: <button value = "Submit" class = "submitbtn"> <span> submit </span> </button>

CSS:

ProgramCodeCopy codeThe 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)

Copy code The Code is as follows: button {
Width: auto;
Overflow: visible;
}
Button span {
Margin-top: 1px;
}

As you can see, each status uses two images (a total of four images ). To further simplify the process, you can convert these statuses to two. However, the initial test of this idea showed inconsistent results.

Browser support:
IE6, IE7, Firefox (MAC/PC), Safari, opera, Camino, etc.

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