In this Photoshop slash CSS tutorial, I am going to show you how to make a 3D button that you can actually press down on when you hover over it (or when you actually click on it if you want).
This is actually a trick I used to use all the time while designing websites and it can really spice up your website. (Why do I not use it on this blog? Well, my blog has a ton of blog posts and it runs on 4 web servers, if I put too many graphics, it will come to a screeching halt and the site would be a lot slower even though it’s slow already.)
First, you will need to make a 3D button, you can read up How to Make a Simple 3D Button and make that first.
Next, we are going to re-use that 3D button but first, let’s “crop” it so you have just the button, not all the white spaces.
Next, lets use the Rectangular Marquee Tool to crop the button, just use your common sense and crop with some space.
See, me cropping? You can also use the Trim tool but for this tutorial purpose, let’s just crop it.
Once you’ve selected the area you want to crop, crop the 3D button by going to Images->Crop.
Next, let’s go make a new layer, make the new layer just above the background like I did in the above screen. This is so we can easily align the two buttons we will be making. In short, you can make two images too, which is easier but your site will load slower so we will be using one image to make the 3D button. If you don’t get it, just follow the directions first.
Next, hit Ctrl+A to select all of your 3D button.
Next, go to Layer->New Fill Layer->Solid Color.
Select a dark color and hit OK. Any color will do, we are just doing so we can align two button later easily.
Next, select Image->Canvas Size.
Change it to pixels for Width and Height.
Then use a calculator to double your height. Mine is 224 times 2 = 448.
Next, put the new height number into the Height value, then hit the Up Arrow for Anchor. This will keep the existing button on top of the image while making your canvas double in size vertically.
It should look like the above image, the 3D button and white space.
Next, choose all three, the text, shape, and the color fill by holding down the Ctrl button then Right Click and select “Duplicate Layers”. This will basically make a duplicate copy of your 3D button.
Next, use the Move Tool to move the copied layer so it sits perfectly under the original. The color fill we did earlier should make it easy to align perfectly (and that is why we did that).
Now you should have two identical buttons, one on top and one on bottom as shown above.
Go un-select the color fills, we don’t need them anymore.
Next, select the copied Shape and Right Click, then Blending Options.
Go ahead and unselect the Drop Shadow and Bevel and Emboss so it’s plain.
Now you should have something like above.
Let’s put some effects so the bottom button looks like it’s being pushed down into the ground, Inner Shadow is good for that so select it. Then set the distance to 0px and Size to 22px.
Yey, we are almost done, now we have basically a 3D button and the same one that pushed down.
Here’s an example CSS code to create the 3D effect from the image we just made:
And here's the button!
Finally, you can change "hover" to "active" so it will press down when you actually click on it.