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.
Download Tutorial (.zip) or Demo
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.
Download PSD
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:
- Blank HTML file,
index.html - Blank CSS file,
style.css - Blank JavaScript file,
script.js - Folder, named "images"
- Place download.png inside images folder.
Step 2 – Link index.html with CSS & JS
Let’s link our CSS and JavaScript to index.html. Place them inside <head></head>. We begin with the CSS file:
<link href="style.css" rel="stylesheet" type="text/css" />
then the latest version of jQuery from Google’s AJAX Libraries repository:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
and finally our JavaScript file :
<script type="text/javascript" src="script.js"></script>
Now our <head> should look something like this :
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
Let’s put codes for the our buttons inside <body> tag :
<p><a href="#" class="button1"></a></p> <!-- CSS only --> <p class="button2"><a href="#"></a></p> <!-- CSS + jQuery -->
Explanation:
We’ve created paragraphs for two buttons, each wrapped with <p></p> with hyperlink <a></a> inside.
Line 1: class="button1" is placed inside <a>, while
Line 2: class="button1" is placed inside <p>
Step 3.1 – CSS only Button
We will create our first button, using CSS only. Open up style.css and paste the following codes inside.
.button1 /* Button with CSS only */ { background: url(images/download.png) 0 0; height:65px; width:580px; display:block; } .button1:hover /* mouseOver */ { background: url(images/download.png) 0 65px; } Explanation:
Our first button is a 100% HTML/CSS button. CSS property background loads the download.png image with exactly the image’s width 580px but only half the height 65px (130/2) so only one of the two buttons in download.png is displayed. Button’s position is determined and controlled by the last value of background property. Think of the last value of background property as where (in terms of height position in pixel) the image should start from.
Step 3.2 – CSS + jQuery Button
We’ll be using the same image download.png for our second button. The difference here is: our second button will be injected with jQuery effect to make the animation smoother. Let’s start with the CSS. Place the follow codes inside style.css.
.button2, .button2 a { background: url(images/download.png) 0 -65px; height:65px; width:580px; display:block; } .button2 a { background-position: 0 0; } Explanation:
Basically both .button2 {} and .button2 a {} shares the same style except for the last value in background property. .button2 {} displays the blue color button while.button2 a {} displays white color button.
CSS part is done. We’ll use jQuery to swap between both states to create a smooth transition effect. Open up script.js and put the following code inside.
$(document).ready(function(){ $('.button2 a').hover(function(){ $(this).stop().animate({'opacity' : '0'}, 500); }, function(){$(this).stop().animate({'opacity' : '1'}, 500);}); }); Explanation:
$(this) refer to .button2 a and when it is hovered, we are going to use the jQuery animation to set the opacity of this element to 0 so we can see the .button2 element (blue button). And when the mouse is out we are going to setback the opacity to 1 with 500 milliseconds for the animation speed.
That’s it !
Thanks for following this tutorial. I hope you liked it and managed to follow it step by step. If you’ve done everything correctly, you should have ended up with something like this. If you have any problem or you need some help feel free to write your question into the comments section.
Here are a re-cap of all required files for this tutorial:
0 comments:
Post a Comment