Ultimate Buttons

[michael_s]

Replaces the several dozen individual buttons with a single image, (or no image, if pure CSS styling is preferred), and converts buttons to CSS. Buttons can be given 'hovering' effects and automatically resize to fit text. Eliminates the need to reproduce an entire set of buttons every redesign.

Download file contains CSS and images for 5 different button styles. Screenshots, instructions and links to examples also included.

Installation consists of two code replacements in includes/functions/html_output.php, uploading the two images to the images folder, and pasting the CSS selectors into stylesheet.css.

You can also create your own images for buttons, or adapt an existing button. Google 'CSS buttons' and 'sliding doors technique' for the basic process. Essentially you create the button image without text. Then cut the image into a left and right hand side. Then upload these two images to the images folder and adjust the CSS in the stylesheet to set the padding and text styling. The button adjusts to text + padding by hiding varying widths of the left hand side 'under' the div tag containing the right hand side of the button.

More...