Practical buttons for building webpages using CSS-style text and graphics

Add CSS text to a button with a graphic background. This button creation method combines the development speed and efficiency with CSS rolling (CSS rolover) marking, this effectively improves the three-dimensional effect of the button appearance image.
 
Compared with regular graphic buttons, these graphic/CSS mixed buttons can be easily created and loaded, because you only need to create and load an image for the blank button, instead of creating an image for each button.
The same image can be used in the background of all buttons on the webpage. Button text labels are simple CSS-style text.
Pre-loaded
One of the few problems with the graphic/CSS mixed style is the limit on the tumble effect. The simplest way to use this technique is to specify the tumble effect of CSS style text and use the same button shape image of all tumble states (rolover states. This can bring you a fast and concise tumble effect, but it limits your development options to a certain extent.
You can also create button images that can be used alternately and build your CSS rules to change the background image for different tumble states. However, these methods give you more flexible design, but when the browser loads an image file for the first time, these interchangeable buttons may cause latencies (unless you use the pre-loaded button image method ).
Pre-loaded image technology is well known and accepted. The problem is that pre-loading images increases the time for webpage loading and appearance in the visitor's browser. The first two minutes of user access are critical, so you must make the page initialization faster in any case. Using the graphic/CSS hybrid button can reduce the image pre-loading time. Of course, if pre-loading can be eliminated, page initialization is faster.
Tumble without delay-do not use preloaded images
I have found an innovative way to meet the needs of button images that can be used alternately in different tumble states without loading any image files. My first contact with this technology was found in an article on the site of Petr Stanicek, the Czech Web designer.
To obtain A typical button tumble effect, you usually need to create three independent images, as shown in Figure. One is a normal button, the other is a suspension state, and the other is an activation state. Image files of normal buttons will be part of the initialization page loading, but the other two images will be loaded separately so that they can be used in the user's browser.
The non-preload tumble technique is achieved by combining all three button exterior images into a single image file, as shown in Figure B. However, you do not need to specify different background image files for each tumble state. You specify the position offset of the merged image. During page initialization and loading, merged image files can be automatically loaded, so there is no need to pre-load them. Moreover, there is no time delay in obtaining different image files in the browser.
The combination of large images and background image location offset allows you to selectively display different parts of the image for each button status. The size of the CSS box in the button text determines the percentage of background images displayed in the browser.
For this technique, you must be clear about the exact horizontal and vertical dimensions of the button appearance and use these dimensions correctly before creating the image file and the CSS rules of the button.