Use CSS-style text and graphics to build a Web page utility button

css| Button | graphics | Web page

Add CSS style text to a button with a graphics background, this method combines the development speed and efficiency with CSS rollover (CSS rollover) markup to effectively improve the three-dimensional effect of the button's exterior image.

These graphics/css mix buttons are easy to build and load compared to the regular graphics buttons, because you just need to create and load an image for the blank button, rather than creating a separate image for each button.

The same image can be used in the background of all buttons on the page. The text label for the button is a simple CSS style text.

Pre-loaded
One of the few problems with graphic/css blending styles is that it restricts rollover effects. The easiest way to use this technique is to specify the rollover effect of the CSS style text and use the same button profile image for all tumbling states (rollover states). This can give you a quick, concise rollover effect, but it limits your development options to some extent.

You can also create some alternate button images and build your CSS rules to change the background image for different rollover states. However, these methods give you more flexible design, but when the browser first loads the image file, these alternate ammonium button images can be delayed (unless you use the method of preloaded button images).

Pre-loading image technology has been well known and accepted by people. The problem is that preloaded images increase the time that the page loads and appears in the visitor's browser. The 12th minute of user access is critical, so you have to make the page initialization faster anyway. Using the Graphics/CSS Mix button reduces the time that the image is preloaded, but the initialization of the page is faster if the preloaded can be eliminated.

No deferred rollover--no use of pre-loading images
I have found an innovative way to meet the alternate button images of different tumbling states, which do not require the loading of any image files. The first time I contacted the technology was found in an article on the website of the web designer Czech Petr Stanicek.

To get a typical button rollover effect, you typically need to create three separate images, as shown in Figure A. One is the normal button, one is the suspended state, and one is the active state. The image file for the normal button will be part of the initialization page load, but the other two images will be loaded separately, allowing them to be used in the user's browser.

The no preloaded rollover technique is implemented by combining all three button exterior images into a single image file, as shown in Figure B. However, you do not need to specify a different background image file for each tumbling state, and you specify the position offset of the composite image. Composite image files are automatically loaded during page initialization, so there is no need to load them beforehand, and there is no time lag in the way browsers get different image files.

The combination of large image and background image position offset allows you to selectively display different parts of the image for each button state. The CSS box size of the button text determines the percentage of the background image displayed in the browser.

For this technique, you must know the exact horizontal and vertical dimensions of the button's appearance, and use these dimensions correctly to create CSS rules for image files and buttons.