How to Create a Push Button Effect in Photoshop and CSS

On 3 Jul, 2011 By With 5 Comments

Just like any website, buttons has to be designed or enhanced for users. Right now we’ve seen websites that has big buttons, gradient effect and some of them are being used as call to action.

buttons-demo in photoshop - Sanjay Khemlani

You can download the PSD at the bottom of this tutorial!

Today, I will show you how you can create a big push button effect just like a real button. We will use a couple of techniques that I’ve learned along the way. We will use Adobe Photoshop to create the button and CSS and HTML to put it in a page. Basically we will start everything from scratch, here we go!

Here is the demo, and you can download it at the bottom.

Let’s get started!

Open Your Adobe Photoshop, the size that we will use is 500px by 500px. Set your margin to 3px height and 4px width. Now set your foreground color to #c9e182, and the other is #a8cb5c.

colors for button in photoshop - Sanjay Khemlani

Select your Rounded Rectangle tool (U) and set the radius to 10px (it’s in the top).  Make sure you set your margin, after that right click and select Make selection and just click ok.

make selection buttons-demo in photoshop - Sanjay Khemlani

Select our Gradient tool and click on the shape, and click ok to Rasterized.

rasterize buttons-demo in photoshop - Sanjay Khemlani

Now, in blending option just select gradients and follow the settings below.

gradients for button buttons-demo in photoshop - Sanjay Khemlani

We are still in Blending options, go to Stroke copy the hex color #d3ed87 and set your size to 1. Click Ok.

stroke-color buttons-demo in photoshop - Sanjay Khemlani

Select the Text tool and set your Font to Arial, Bold and size is 58pt. Type in Download, and color it with white. In Blending options, select Drop Shadow and follow these settings.

text-dropshadow buttons-demo in photoshop - Sanjay Khemlani

Merge your Download text and button1 layer (Ctrl + E).

Now rename it to button1. And create a duplicate (Ctrl + J) rename it to shadow –button1, and tap your arrow key down 6 times so it’ll go down by 6px.

Hold Ctrl + click to shadow –button1 layer that you’ve just created, and for your foreground color select this #96b553, and select your brush tool. Make sure it’s bigger and you’re shadow –button1 is still selected, now color your shadow –button1. You’ll get something like this;

shadow-color buttons-demo in photoshop - Sanjay Khemlani

The next step is quite easy; we will duplicate button1 and shadow-button1. First, duplicate button1 and rename it to button2 drag it below button one and provide a 5px space from above. Second, duplicate shadow-button1 and put it behind button2 and press your arrow key 3 times so it will be lowered 3px. You should end up something like this.

duplicated-layer buttons-demo in photoshop - Sanjay Khemlani

Make sure that all layers are properly aligned, or you’ll get a weird effect later on. Now just crop the image and disable the background white. Save it as PNG format.


Now we’ve reach our second part of the tutorial, this part is really easy. Open your favorite code editor, mine is Adobe Dreamweaver (I like the GUI, btw). And copy this code below in your CSS.

Now, to call your button on HTML <div id=”button”><a href=”#”></a></div>. And there you have it, if you want to use your button you just have to call your div id=”button” and you’re good to go.

You can view the demo here.

Hope you’ve learn new techniques and you can implement this on your website. If you’ve came up with cool ideas show them in the comments, I want see what you got!

5 Responses to “How to Create a Push Button Effect in Photoshop and CSS”