Professional Glossy “Download” Button

In this easy, step-by-step tutorial I’m going to show you how to design a simple, professional & glossy “Download” button. I’m just using download as an example here, it’s really a multi-purpose button 😉 These kind of buttons are also being used a lot on “Web 2.0” sites lately, so get with the times! (not seriously)

Glossy Download Button Result Image

1. Creating your Button

Start by creating a new document to make your button in, otherwise open up a website design you’ve been working on. I created a small document sized 400 x 110, just to make my button(s) in.

Now you need to make the shape of your button, you can do this by either using the Rounded Rectangle Tool (which is the most common) or you could use the channels to create a nice, uniform rounded box. It’ll be best if you just use the Rounded Rectangle Tool though.

Rounded Rectangle Tool in Toolbar

For the settings, use a radius of about 10-15px, you can see the other settings I’ve used below:

Rounded Rectangle Tool Settings

Now, draw out your button onto the canvas in whatever color you want. (it doesn’t matter what color you use)

Glossy Download Button Result Image

2. Apply Layer Styles

Right-click your button layer in your layer’s palette then go into the Blending Options, click and apply the following settings:

  1. Inner Shadow
  2. Gradient Overlay

You can use whatever colors you want in the above layer styles, but your button should now look something like this anyway:

Layer Styles Applied

3. Highlight / Shine Effect

Now it’s time to add a nice, glossy shine to the button. Start by making a selection around your button (Select > Load Selection) then contract your selection by about 5 pixels (Select > Modify > Contract) now you should be left with a selection like this:

Contracted Button Selection

Create a new layer then drag a white to transparent gradient from the top of the selection to the bottom, as shown in the below image:

White Transparent Gradient

Now you need to make a curvy path using the Pen Tool, turn your path into a selection then delete the bottom half of the gradient, something like this:

I also used a large, soft brush to erase away the bottom edges, this gives it a very nice, smooth feel.

4. Text & Details

Now it’s time to add your text to the button! Start by getting out the Horizontal Type Tool (T) then write out your text.

Text Added - Myriad Pro

The font I’ve used above is called Myriad Pro, for the top line of text I used: Black Italic, 24 pt, Sharp, #fff.

For the bottom line of text I used: Semibold Italic, 12 pt, Sharp, #fff. I finished off by adding this Drop Shadow to the text layer.

Drop Shadow on Text

Lastly, for a nice touch, I added in a reflection to the button and a faded cog in the bottom left corner. Add the shadow/reflection by duplicating your main button later, moving it below your button layer then erase all but the top.

Reflection Added

You can download the cog shape that I used from: Cog Shape File.

Cog Shape Added

5. Finished

And that’s pretty much it. I also created a red version of the button though.

Red Version of Button

Thanks for reading, I hope you enjoyed the tutorial.

6. HTML & CSS Markup

I’ve also made the coded version of this rollover button, for those that might be interested.

CSS Code:

#button { margin: 0; padding: 0; }
#button a { display: block; background: url(./button_off.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
#button a:hover { background: url(./button_on.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }

HTML Code:

<h1 id=”button”><a href=”#” title=””>Button</a></h1>

View the output.


34 thoughts on “Professional Glossy “Download” Button

  1. Geret Bary says:

    wonderful thanks a lot

  2. Sebastiaan says:

    Nice though, although you could also try and style a button instead of an anchor.

    (yes with javascript onMouseOver(), etc.)

    This isn’t the symantically correct way to display a button.

  3. Ben says:

    Great stuff these shiny buttons are all the rage at the moment :)

  4. pbase says:

    Although I appreciate the effort, I don’t think you’ve given all the steps here.
    Following your steps will not give you the shine gradient shown in the final version. Looking closely at the final stage of the gradient in step 3, you can see that the gradient has a different tone and shape, most noticeable at the top and corners.
    I believe you may have overlooked a few important steps.

  5. Trashy says:

    Pretty neat, thanks a lot for the CSS-Version.

  6. Daniel Neri says:

    Really really neat!

    Great job :)

  7. lp says:

    I really like your tutorial and I’m looking to create similar buttons however following along as I got to making the path and creating the shine affect it’s unclear what to do to make my graphic as clean? Do you have extra steps on how to make the curvy path using the Pen Tool and create the shine? Or can you point me to where I can find a more in depth tutorial on how to do this?

    great job though!

    Thank you!

  8. Eli says:

    I’m sorry for not being very detailed around the Pen Tool area, for those wondering about it, please look up a detailed tutorial on using the Pen Tool.

    Sorry again!

  9. cinder says:

    so cool.Thank you for sharing the tutorials.

  10. Razvan says:

    Great tutorial. Thx!

  11. Damodar says:

    Everything went on fantastically fine, but at last the pen tool and the shading made all the difference, I think you might have omitted some steps, I am not happy about that part at all.

  12. Bob says:

    This is really great and really helpful for my site. thanx!

  13. tmem says:

    thanks that is really good work

  14. Sachin says:

    WOW…..that was really great exp for me.
    thanks n keep it up……..

  15. leia_organa says:

    Hopeless – either post the FULL tutorial or there’s no point. It’s painfully obvious once you come to deleting the bottom half of the gradient with a pen tool selection, that this tutorial is incomplete. You can see that the next thumbnail bears no resemblance to what you’ve just done yourself in Photoshop – that’s because there’s at least one step missing folks! The opacity of the gradient is different for starters. Removing the bottom half of the gradient, without leaving a sharp edge, is the most important step and it’s been omitted. Very frustrating.

  16. Jannifer says:

    Thank you so much..

  17. Zac says:

    EAse up folks, If you’re a beginner, you might have some troubles….I mean c’mon, post a tutorial of how to use the pen tool???

    Some of these things you need to know already.

    If you want to have your hand held, cough up the dollars and go to college.

  18. somu says:

    Thank you very much

  19. Ashley says:

    Awesome! Thanks!

  20. Roben7k says:

    Excellence!!! Thanks for spreading idea.

  21. Anon says:

    If you cannot follow this tutorial then you need to learn photoshop before trying to do anything fancy, steps were not omitted, the author was assuming that you knew your way around photoshop. Wonderful tutorial by the way.

  22. Toni says:

    Thanks – Great help!

  23. Mike K says:

    Thanks for the tutorial — it helped me out a lot! Definitely going to back to check out more tutorials.

    Great job, and thanks again!
    – Mike

  24. oyun says:

    Thanks for the tutorial, it is reaaly nice work and I liked red color it looks great.

  25. Juhi says:

    Thanks for this tutorial. I made a similar button for my website.

  26. Silent Noise says:

    My Favorite Button (DOWNLOAD)
    My friends call me a download freak
    That’s really nice thanx dude

  27. Uwn says:

    Great tutorial!
    But I agree with some speakers. There’s a thing missing here. =) I was searching for this shine effect the whole day, now thought I’ve found it here. But I think I must take some basic pen tool lessons first… now I know, that’s what I was searching for actually XD

    anyway, awesome work!

  28. suzan says:

    Great tutorial!! Just tried it out.

    Thanks a lot.

  29. zenjoke says:

    thanks for the tutorial, it’s great and usefull.

  30. algoenz says:

    wow, this is amazing :)

    I just learnt photoshop these days, and just wondering if anybody can explain a little bit about how to do this:

    “Add the shadow/reflection by duplicating your main button later, moving it below your button layer then erase all but the top.”

    Firstly, I can’t open the ‘faded cog’ and i don’t know how to add a reflection like above.

    Thank you so much :)

  31. asad21221 says:

    very nice

  32. vasanth says:

    Thank for sharing this one…

  33. 南通SEO says:


  34. Theo says:

    Great and very well explained tutorial, thumbs up !

Comments are closed.

Pin It on Pinterest

Share This
Sign up for our Newsletter

Signup today for free and receive all new free tutorials published at Photoshop Star.