In this tutorial I’ll teach you how to create a download button.

OK then, let’s start.

Open a new document (mine is 600×600).

Create a new layer and pick the „Elipse Tool”. Draw a blue circle holding SHIFT down. (I used #3c88fa).


Now, let’s apply some blending options:
First is „Drop Shadow”


Next is „Gradient overlay”


Create a new layer. Select the „Custom Shape Tool” and choose the „Arrows”.



Pick arrow9 and draw an arrow in the middle of the blue circle:


Right click on the arrow layer and choose „Rasterize layer”. Then pick the „Rectangular Marquee Tool” and draw a small rectangle like in the picture below:


Delete the selected rectangle and after that move the rectangle down, press the Delete key and continue until your arrow looks like this:


Let’s add now some blending options to the arrow layer:

First „Stroke”:


And then „Drop Shadow”


And finally „Gradient Overlay”:


And the button is now ready:


Aug - 15 - 20094 Comments »


  1. Erin says:

    I need to know how to make the button initiate a download. i.e. the whole button, not just the picture :-(

  2. admin says:

    Hello Erin,
    This was just a design tutorial. To make the button work you need to write code in your webpage. Here is an example:

    You have to replace the paths from the example with the ones on your website. In the “href” you write the path to file you want to be downloaded and in the “src” the path to the image of the button.
    This is just an attempt to answer your question. If you want to learn further about creating webpages you must learn HTML. There are a lot of free tutorials on the web. Here is one (the one that everybody recommends anyway) –
    Good luck!

  3. read books about webdesign and also get the programs and fiddle with them the very best way to master is hands on

Leave a Comment


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.