Posted: 21 May 2010 10:20 AM PDT
Call to action in web design is a term used for elements in a web page that solicit an action from the user (clicking, hovering, etc). Today we’re going to create an effective and awesome call to action button with some CSS and jQuery that grab the user’s attention and entice him to click .
Throughout this tutorial we’ll explain every line of used code with details and hope it will be useful for you. The following tutorial uses HTML, CSS and jQuery with difficulty level Beginner and an estimated completion time of 45 minutes.
Part I – Create The Button Image
In this first part we will show you how to create the needed images with Photoshop in simple easy steps. Let’s start.
Create a new Photoshop document with a width of 580px and a height of 130px. Go to View > New Guide then, set the Orientation to Horizontal and the Position to 65px.
Create more guides; each for the top, bottom, left and right. Your image should have these following guides once you are done:
The guides appear to split your canvas into top and bottom halves. Select the Rounded Rectangular Tool, set the Radius to 5px and draw a rectangular shape on the top half of the canvas.
Change the Styles for Gradient Overlay and Stroke.
Select the Type Tool and type “Download” for as sample text into the box that you have created. Align the text to the center middle of the box and your output should look something like this:
We finished the creation of the first state of the download button. Let’s create a new group and move all layers into it. Duplicate the group and then position it under the first group. we’ve created.
Head over to the duplicated group and change the Gradient Overlay and Stroke style of the our second rectangular box (the hovered one) with the following setttings:
With the second group selected, use Move tool to move the entire rectangular box down to the second half of the canvas.
That’s it! We finished with the first part. Save your image as download.png and fire up your favorite code editor.
Part II – The HTML
Step 1 – Prepare the necessary Files
Create a folder, and give it a name. We’ll name it jQueryCallToaction for this tutorial. Inside jQueryCallToaction folder, create these following files/ folders:
Step 2 – Link
|You are subscribed to email updates from hongkiat.com |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Google Inc., 20 West Kinzie, Chicago IL USA 60610|