|
Rolling onward and upward  Here's a quick way to create a raised, square button. Create a square. Slice it in half (making two triangles). Color the top
half a lighter color and the bottom half a darker color. Add a smaller square on top, and you have a square button.Flop this to make a button that is depressed. No, not blue, but
in the un-up position. I've added some shading so you can see both the smaller square and the two halves of the square beneath. 
Here are the three button states using the square button. (You can also use this kind of button for an auto-generated button). As the mouse passes over the button, the button
appears to rise up. I've added a Mouse Out image: however, you could also use the Initial Image for the Mouse Out so the button would rise and then revert to the Initial state.
 Many software applications can create a conical gradient fill. This is a gradient fill that sweeps 360 degrees from a central
point. Applying a simple 2-color conical fill to a circle with the lighter portion of the fill on top, the darker portion on the bottom, and a solid-colored smaller circle
centered over the conical-filled circle, creates a splendid 3D round button. Reversing the light and dark portions of the fill create a recessed button.
As with the square buttons, here are the three round button states. The Initial state is in the recessed position while the
Over state is raised. The Out state is raised and is the same color as the Initial state but the text is a different color.
We interrupt this article for a question
I just received an urgent e-mail message from a Mrs. Ima Klueless asking why we should use these Picture Rollovers
when auto-generated buttons are so much easier? Well, Mrs. Klueless, is life a contest to see how easy we can make things? Of course it isn't! Often using a Picture Rollover offers a more flexible solution.
To elaborate, auto-generated buttons (created in the Style view), can be a bit static. Each button is the same size and the spacing is the same, be it horizontal or vertical, and the text is
always the same size, the same font, and appears on the button in the same place. Picture Rollover buttons can be placed on the page independently. The colors can be changed
or even the button shapes themselves so the button bar does not have to be a bar. Hope this helps. And now, back to the article. 
Here's a fun approach that adds a nice surprise to the page. In the initial state the text is two dimensional. But as the mouse
passes over the letters pop up. When the mouse retreats, so does the text. Using the same background color for the text as for the site, makes the text appear to float on the page.
 Most image-editing software, such as Photoshop, has a filter for creating embossed or debossed text. Here's an
easy way to do this in a vector application such as Illustrator or CorelDRAW, or my favorite, XARA. Make three copies of the text. Stagger them as shown on a diagonal with equal spacing.
Make the top text lighter than the background color. Make the bottom text darker than the background color. Bring the middle text to the top and make it the same color as the
background. Reverse the colors to make debossed text and make the middle text darker than the background to reinforce the illusion of the text being lower than the page.
Here's a Picture Rollover button I recently created for a building contractor's Web page. The background for the site is
a pale green isometric grid. The Initial state for the button is outlined. As the mouse passes over the button, the shape fills with a solid color. As the mouse moves off the button, the Out
state is a 3D cube. This creates the impression of a building project from blueprint - to construction - to finished building.
|
