Design Stylish Button in Photoshop: Part 3
Hold from Corners as Drag inside as shown in the image belowSo 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
Select Bevel and Emboss
Change the settings as shown in the image below
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
Say something about article, THANKS!
|
