LAYOUTLAND.net : Tutorials : Smooth Buttons

Home | Terms of Use / Privacy Policy

Click [+] to view categories:

[ + ] LAYOUTS

  L Black & White
  L Blue
  L Green
  L Orange/Yellow
  L Purple
  L Red
  L Animal
  L Celebrity
  L Countries
  L Dark
  L Nature
  L Rainbow

[ + ] GRAPHICS

  L Animations
  L Buttons
  L Buttons - 88x31
  L Backgrounds
  L Graphics
  L Enter Signs
  L Lines
  L Cartoon Dolls
  L Cliques
  L Comment Dolls
  L Critters
  L Flag Stamps
  L Site Licenses
  L Toy Boxes
  L Update Boxes
  L Doll Maker
  L 3-D Heading Maker

[ + ] GENERATORS

  L Color Scrollbar
  L Drop Down Menu
  L Frames
  L Iframes
  L Link Rollover
  L Popup Window
  L Text Effects

[ + ] FONTS

  L Dingbat
  L Ordinary
  L Script
  L Strange

[ + ] TUTORIALS

  L Layout - Part 1
  L Layout - Part 2
  L Smooth Button

[ + ] FREEBIES

  L Free Axe Body Spray
  L Get Paid to Read Email
  L Daily Brain Teasers

[ + ] CONTESTS

  L Win a Sony Vaio
  L Win Free Candy
  L Win Free Treats
  L Win $50,000

HTML EDITOR
ABOUT US
SPONSORS
HELP

Smooth Buttons

Select the fill color of your button. I've chosen #FF9999 for this example.

Select the rounded rectangle tool from the toolbar.

Draw your button. (a)

Adjust the roundness using the Object toolbar. This button is set at 60.

Go to the Fill toolbar. Select Ellipse from the menu. Click on the Edit button to change the gradient. The far left color should be many shades lighter than your fill color. The right color should be your fill color. (b)

Drag the gradient guidlines to the top left hand corner of the button. Extend and angle the top line about 45° to the right. (c)

Go to the Stroke toobar. Select: Basic, Soft Rounded, with a size of 2. The stroke color should be the same as your fill color from the first step. (d)

Add text to your button and save. Since there are many colors in a gradient, the image looks best as a .jpg image. (e)

a

b

c

d

e

You are here: Home > Tutorials > Smooth Button