Step 1 – Create the shape
Create a new document in photoshop fit to your needs. In this instance, I’ll be creating a 570px wide button. The height of the new canvas should be twice the height of the button needed (explained later, but for now just use the top half of the canvas).
We’re going to make a rounded button. Use the Rounded Rectangle Tool with a radius of 5px. Keep in mind that we will add a border and shadow, so leave some white space around the button.
Step 2 – Add layer styles
We will use a pretty basic color scheme for the initial state of the button. The surprise (I call it the wow-effect because of the contrast) will be added in the color scheme of the hover state button.
Note from Editor
The diagrams shown are not in English, but the diagrams will apply to English versions of Photoshop as well. We apologize for any inconvenience.
Drop shadow
Gradient overlay
Stroke
Step 3 – Highlights
Select the the shape of the button: Ctrl (Cmd for Mac users) + Click the Layer Thumbnail in the Layers Palette. Now add a new layer and fill the selection with the color #fafafa (use the Bucket tool). Select the selection tool and move the selection 1px to the right. Now click backspace and the selection will be deleted. Now you need to move the selection 1px up and delete the selection. The last step is to move the selection 2px down and delete the selection. What remains is a sleek highlight effect on the left side of the button.
Apply the same trick on the right side of the button.
Step 4 – Button text
Type the text "Send" or "Submit", or whatever you wish:
- font: Helvetica Neue Bold
- font-size: 35px
- color: #343434
Add also the following layer style:
Final image
Step 5 – Prepare the canvas for a sprite
We’re going to make a sprite of the buttons. Why sprites and not single images? Why combine all those images? Isn’t it quicker to have smaller images?
Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. In other words, when you have many images to be used, instead of having them as different individual files, we combine them into one. Therefore, the client computer only downloads one image for all the different graphics to be displayed.
Measure the height of the button. My example has a height of 64px. The link hover button will have the same size as the link button so my Photoshop canvas needs to have a height of 128px (= 2 x 64px). Use Ctrl/Cmd + Alt + C to change the height of the canvas.
Step 6 – The link hover button
Select all layers in the layers palette and place them in one group. Duplicate this group and move it down to the empty space. Now you have the same two buttons in the sprite.
Change the color of the copied text to #fffff and change the drop shadow:
Add the following layer styles on the copied button shape:
Drop shadow: don’t change it.
Gradient overlay
Stroke
Final touches
We’re going to add some gloss to the link hover button. Select the the shape of the button: Ctrl/Cmd + Click the Layer Thumbnail in the Layers Palette. And fill a new layer with the color #ffffff using the Bucket tool. Cut Away the bottom part with the Selection tool and change the opacity to 7%.
The final touch is changing the opacity of the highlights to 30% (which is already applied in the image above), because the original ones are too strong for the green button.
Final image
Save the image/sprite for web and you’re finished with the design part. It’s time to move on to the development part!
