Push Button Tutorial for Your Website

This comprehensive tutorial will give you the information you need to create a push-button graphic effect for your website.You will need Photoshop 6 or higher and a HTML editor such as Visual Web Developer Express.

Demo - Click on image:

 



Photoshop tutorial.

Open an 800px x 600px new image with white background on the base layer.

Double-click base layer to unlock it.
Add a new transparent layer on top of base layer.

Choose a medium color for foreground.
Draw a wide rectangle with a round rectangle tool (U).

 
Drag the layer of the rectangle to make a copy.

Select the "Move" tool (V) while the top rectangle layer is highlighted.

Move the rectangle with up the arrow key until the rectangle is above the lower rectangle and no white space is visible.

Select the upper rectangle layer:
  Select "Layer", "Layer Styles", "Bevel and Emboss"
  Style: Inner Bevel
  Technique: Smooth
  Depth: 100%
  Direction: Up
  Size: 10px
  Soften: 0px
  Angle: 120 degrees
  Global Light: checked
  Altitude: 30 degrees
  Gloss Contour: linear
  Anti-aliased: unchecked
  Hightlight Mode: Screen
  Opacity: 75%
  Shadow Mode: Multiply
  Color: Black
  Opacity: 75%

Select the lower rectangle layer:
  Everything the same as upper rectangle except - Size: 7px
Select "Color Overlay"
  Blend Mode: Difference
  Opacity: 10%

Drag the base layer to the trash can icon to create a transparent background.
Merge all layers.
Select "Layers", "Merge Visible" or Ctl-Shift-E.
Select "Image", "Trim...":
  Based on: "Transparent Pixels"
  Trim Away: "Top, Bottom, Left, Right" check boxes selected
Select "Image", "Image Size":
  Height: 96px
  Scale Styles: checked
  Constrain Proportions: checked
  Resample Image: Bicubic Sharper

 
Select "Crop Tool" (C).
Click from the outside of the upper left-hand corner of the cropped image and drag right and down to select a few pixel  left of the right-hand edge of image.

Select "File", "Save for Web...":
  Preset: PNG-24
  Interlaced: Unchecked
  Transparency: checked
  Click "Save" and choose image folder for web site.

Select "Window", "History" and select one step above the latest action.

Select "Crop Tool" (C).
Click from outside of the upper right-hand corner of the cropped image and drag left and down to select a few pixels of the right hand image.

Select "File", "Save for Web...":
  Preset: PNG-24
  Interlaced: Unchecked
  Transparency: checked
  Click "Save" and choose image folder for web site.


HTML/CSS tutorial.

Create a button on the HTML page.
Example:

Create a style sheet that will utilize a "Sliding Doors" effect. Click ((here)) for a good explanation of this effect.
Example:


Thee CSS code can be tweaked to suite different size buttons.

Click ((here)) for the project code.