Design Stylish Web Buttons PSD Tutorial

Previous Part of Tutorial

Design Stylish Button in Photoshop: Part 3

Hold from Corners as Drag inside as shown in the image below
So that the border lines fit into canvas as shown

In layer Patel there will be only one Layer
Duplicate this Layer Twice
Set all three layers as shown in the image below
Make Sure
Normal State Layer Image is Placed at Top (0-50px)
Hover State Layer Image is placed in Middle (50-100px)
Active State Layer Image is Placed at bottom (100-150px)

Select Hover State Layer and Adjust Brightness to 60

 Now Double Click on Active State Layer to Open Layer Style Dialogue Box
Select Bevel and Emboss
Change the settings as shown in the image below

 Your Image should be Similar to this one

The Designing phase is finished.
Now Just Save this button as Download Button.PNG 
Upload it to your website or blog and copy the image location

Embed Sleek Stylish Button in your Website/Blog

Copy the following code and paste it inside your website / blog HTML code just above the </head> code.

<!--Download Button Start --> <style type="text/css"> <!-- .buttonD { display:block; width:175px; height:50px; text-indent:-9999px; } .buttonD a { display:block; width:100%; height:100%; background: url(Your Image Link Location) } .buttonD a:hover { background-position:0 100px; } .buttonD a:active { background-position:0 50px; } --> </style> <!--Download Button End -->

Copy and Paste the following code wherever you want your button to appear.

<p class="buttonD"><a href="#null">Download File</a></p>

If you want your button to redirect your viewer to another URL, Replace #null with the Destination URL