How to Make Shiny Glass Buttons in Photoshop

Written by linda johnson
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make Shiny Glass Buttons in Photoshop
Shiny glass buttons (Volumetric glass buttons for a web image by Alexandr Shebanov from

Shiny buttons that look like glass are an effect you can create in Adobe Photoshop with just a few steps. They can be made in colour, or in grey scale, depending on where they will be used. Place these shiny buttons in various images to act as on/off buttons, control buttons or up/down buttons. You can even create multiple shiny buttons in different colours and use them on a website as navigation buttons that link to different pages on the site.

Skill level:
Moderately Challenging

Things you need

  • Adobe Photoshop software

Show MoreHide


  1. 1

    Go to "File" and then "New" in Photoshop. In the drop-down box, name your document "Blue Glass Button" and choose "Custom" in the preset box. In the "Width" box, type in "5" and choose "Inches." In the "Height" box, type in "5" and choose "Inches," although you can make the dimensions of your "Image" and "Canvas" any size you need them to be. In the "Resolution" box, type in "300" and choose "Pixels/Inch" indicating your image will be 300 dots per inch (DPI), which is the right choice for print publication. You may use 72 DPI if your image is going to be used on the Internet. In "Color Mode," choose "CMYK" for print, or "RGB" for Internet use, and choose "8 Bit." For "Background Contents" choose "Transparent." Click on "OK."

  2. 2

    Use the "Ellipse" tool in the toolbox on the left of the screen to make a circle in the middle of the canvas you created. Draw the circle any size you like. Although the circle will automatically fill with the foreground colour, it can be changed in the next step.

  3. 3

    Go to the "Colors/Swatches/Styles" box on the right side of your workspace. Click on "Styles." Click on the style named "Blue Glass (Button)." Your circle will automatically be filled with all the Layer Style elements that make a blue glass button. Go to "Save as" under "File," name your file "blue glass button" and choose the ".psd" file extension under "Format." This will save all your layers for future editing.

  4. 4

    Build another shiny glass button without using the "Styles" choices. To do this, go to "Layer" in the top toolbar, then click on "New." In your new layer, use the "Ellipse" tool to make a simple circle. Use the "Eyedropper" tool in the Toolbox on the left to pick a colour from the colour bar, which is under the colour tab in the "Colors/Swatches/Styles" box on the right.

  5. 5

    Go to "Layer" and click on "New" to make another new layer. In this one, draw a circle slightly smaller than the first. Fill it with a lighter shade of the colour used in the big circle by placing the "Eyedropper" tool over that lighter shade in the colour bar under the colour tab. Using the "Move" tool in the upper right of the toolbox, place the small, lighter-coloured circle on top of the darker-coloured circle, leaving only a crescent shape visible of the bigger circle.

  6. 6

    Select the layer with the lighter-coloured circle by clicking on it in the "Layers" palette on your right. In the horizontal toolbar at the top of your screen, go to "Layer" and then "Layer Styles."

  7. 7

    Select "Inner Glow" under "Layer Styles." You will be taken to a Layer Styles dialogue box. There, on the left, "Inner Glow" will already be checked. Also, check "Bevel and Emboss," "Color Overlay" and "Gradient Overlay."

  8. 8

    Choose these selections in the Layer Styles dialogue box to the right. In the "Blend Mode" box, select "Multiply." Set the "Opacity" slider to 75 per cent. Leave the "Noise" setting at zero. Check on the circle in front of the "Gradient" box. A drop down box will show you choices. Select the top left choice, which is "Foreground to Background." That means the gradient will use your foreground and background colour choices in a graded transition from one colour to the other. Choose "Softer" in the "Technique" box. For the other settings, check "Edge," leave "Choke" at zero and leave "Size" at 88 px. For "Contour," choose the shape that looks like a dark triangle in the lower right. "Range" should be 50 per cent, and "Jitter" stays at zero. Click "OK."

  9. 9

    Make your button look shinier with a simulated reflection. Go to "Layer," click "New," and on the new layer, draw a small ellipse with the "Ellipse" tool. Fill the ellipse with white using the "Eyedropper" tool. With the "Move" tool, place the white ellipse close to the top of the dark crescent shape.

  10. 10

    Go to "Save as" under "File" and name your file "(colour) Glass Button." Save it as a psd file to preserve your layers for future editing. You may also want to save it again as a separate file with a .jpg extension. The jpg file will be smaller, which makes it easier to e-mail as an attachment or insert into another graphic.

Tips and warnings

  • In the "Colors/Swatches/Styles" box under the "Styles" tab, there are other button styles you can try. Experiment with the "Color Target," the "Double Ring Glow" and the "Striped Cone" (buttons). Also, if you fill your circle by choosing the "Chiseled Sky" (Text) choice under the "Styles" tab, it will have an automatic gradient and bevelled edge.
  • Files with the ".psd" extension can only by opened and used in Adobe software such as Photoshop, Illustrator, InDesign, etc.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.