In this Photoshop tutorial you will learn an easy way to create an attractive looking Add To Cart button for an e-commerce website. This button is based off the one currently used on Dell.com.Your final add to cart button will look something like the image below.

Step 1

Create a new Photoshop file 135 x 35 with a white background.
Create a new layer for the add to cart button background. Name this layer Button Background.
Zoom in a few times so your canvas is large.
Change the foreground color to black.

Step 2

Select the Ellipse tool.
Start in the upper left corner and hold down shift to draw a perfect circle until the bottom of the circle is at the 33px mark.
Use the select tool and move the circle 1px down and 2px right by pressing the down arrow once and the right arrow twice.

Step 3

Use the marquee tool to select the right half of the circle. Copy and paste into the same layer. Use the selector tool to move the new half circle all the way to the right of the canvas. Use the arrow keys so it’s 1px down and 2px to the left of the far right edge of the canvas.

Step 4

Merge the half circle layer down into the Button Background layer.
Use the rectangle tool and fill in from the top center of the full circle to the lower bottom of the half circle. Use some horizontal guides if needed.

Step 5

Create a new layer, name it Circle and then change the foreground color to white.
Use the ellipse tool to draw a perfect circle on the left side of the button - hold down shift while drawing to get a perfect circle. The easiest way to get a good size circle is to start the circle on the very outer edge of the button - somewhere around the 5px horizontal and 5px vertical mark. Use the select tool and move the circle so it looks good.

Step 6

Create a new layer and name it arrow.
Select the custom shapes tool and choose the thick arrow. This shape should be called arrow 9.
CHange the foreground color to black and draw an arrow inside the circle. Make sure the arrow body is somewhat thick. Use the select tool and your arrow keys to position the arrow so there’s a few pixels of whitespace around the arrow edges.

Step 7

Add a new layer and change the foreground color to white.
Use the text tool and select Georgia font, Regular style, 14px, and sharp. Write Add To Cart. Use the select tool to position the text so there is a bit of whitespace between the white circle and the text.

Step 8

Select the Button Background layer.
Click the gradient tool button and then click the gradient color bar to edit the gradient colors. Your color shades should be very close in color.
Click the bottom left stop slider and then the color button to edit the lightest color. This button uses #88b17b. Click the lower right stop and click the color to edit the darkest color. This button uses #599447.

Step 9

Press CTRL and click the layer thumbnail of the Button Background to select that layer.
Start at the top center of the button background and fill the gradient to the bottom of the button.

Step 10

Select the Arrow layer.
Press CTRL and click the layer thumbnail of the arrow to select that layer.
Start at the top center of the and fill the gradient to the bottom of the arrow.

Save for web as a 256 color GIF and put the add to cart button on your website.

You now have a button that looks just like the add to cart button used on Dell.com. Dell has spent a lot of time and money in usability testing to come up with an Add To Cart button design that boosts their conversion rate and your new button should improve your conversion rate also. Remember to place your button as close to the price as possible and keep it above the fold. The reason green was chosen is because it pops on a white background. The first two things someone should notice on your product page is the product image and your add to cart button. If you want to experiment with other colors, using an orange gradient should work well too.

Here’s a link to 30 button designs to give you some inspiration for creating buttons. You should be able to use this tutorial as a base to create most of the buttons listed - http://vandelaydesign.com/blog/galleries/button-design-showcase/