How to Create a Push Button Effect in Photoshop and CSS

P On 3 Jul, 2011 • + By 9 With 5 Comments

WordPress Portfolio Themes

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.

HTML / CSS Part

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!

C Tags: ,


Show some love and share!

Join our 356 subscribers and get the tutorials right from your inbox!

*I will not send spam message or affiliate offers.

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

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

  1. Melanie Reyes says:

    this is pretty good.
    we need more tutorials! :)

  2. sanjay says:

    @Melanie, glad that you like the tutorial! I will definitely post more, I’ll keep you posted.

  3. George says:

    Good tutorial. With good screenshots you’ve explained this in very simple terms. Thanks.

  4. I love great design graphic, and to be honest I had learn a few tricks of using Adobe from your blog, though I’m not a designer, and it seems you know quite a lot about graphic design, might need your expertise in the near future because I’m testing out something on my blog (stealth mode, but if you are good you will be able to spot) and if the results are good, I will need to create a button sort of a push button with good design background.

    • sanjay says:

      Good to know that you are able to use my tuts. About the testing of something, I am not really good of spotting so you need to give me a clue, lol. You can drop an email whenever you need me, I might do it for free :) Thanks again for the kind words.

Leave a Reply