Just like any website, buttons has to be designed or enhanced for users. Right now we’ve seen websites that has big buttons, gradient effect and some of them are being used as call to action.
You can download the PSD at the bottom of this tutorial!
Today, I will show you how you can create a big push button effect just like a real button. We will use a couple of techniques that I’ve learned along the way. We will use Adobe Photoshop to create the button and CSS and HTML to put it in a page. Basically we will start everything from scratch, here we go!
Here is the demo, and you can download it at the bottom.
Let’s get started!
Open Your Adobe Photoshop, the size that we will use is 500px by 500px. Set your margin to 3px height and 4px width. Now set your foreground color to #c9e182, and the other is #a8cb5c.
Select your Rounded Rectangle tool (U) and set the radius to 10px (it’s in the top). Make sure you set your margin, after that right click and select Make selection and just click ok.
Select our Gradient tool and click on the shape, and click ok to Rasterized.
Now, in blending option just select gradients and follow the settings below.
We are still in Blending options, go to Stroke copy the hex color #d3ed87 and set your size to 1. Click Ok.
Select the Text tool and set your Font to Arial, Bold and size is 58pt. Type in Download, and color it with white. In Blending options, select Drop Shadow and follow these settings.
Merge your Download text and button1 layer (Ctrl + E).
Now rename it to button1. And create a duplicate (Ctrl + J) rename it to shadow –button1, and tap your arrow key down 6 times so it’ll go down by 6px.
Hold Ctrl + click to shadow –button1 layer that you’ve just created, and for your foreground color select this #96b553, and select your brush tool. Make sure it’s bigger and you’re shadow –button1 is still selected, now color your shadow –button1. You’ll get something like this;
The next step is quite easy; we will duplicate button1 and shadow-button1. First, duplicate button1 and rename it to button2 drag it below button one and provide a 5px space from above. Second, duplicate shadow-button1 and put it behind button2 and press your arrow key 3 times so it will be lowered 3px. You should end up something like this.
Make sure that all layers are properly aligned, or you’ll get a weird effect later on. Now just crop the image and disable the background white. Save it as PNG format.
HTML / CSS Part
Now we’ve reach our second part of the tutorial, this part is really easy. Open your favorite code editor, mine is Adobe Dreamweaver (I like the GUI, btw). And copy this code below in your CSS.
#button a{
margin:50px auto 0 auto;
background: url(image/buttons.png) repeat scroll 0 0 transparent;
display: block;
height: 120px;
width: 350px;
text-indent:-9999px;
}
#button a:hover{
background-position:0 -120px;
}
I will not explain the CSS code because it is really generic. You will understand it just by reading.
Now, to call your button on HTML <div id=”button”><a href=”#”></a></div>. And there you have it, if you want to use your button you just have to call your div id=”button” and you’re good to go.
You can view the demo here.
Hope you’ve learn new techniques and you can implement this on your website. If you’ve came up with cool ideas show them in the comments, I want see what you got!
[sociallocker id=”3494″]Download[/sociallocker]
