{"id":7495,"date":"2010-05-21T22:30:38","date_gmt":"2010-05-21T14:30:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=7495"},"modified":"2025-04-04T00:41:21","modified_gmt":"2025-04-03T16:41:21","slug":"simple-call-to-action-button-with-css-jquery","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/simple-call-to-action-button-with-css-jquery\/","title":{"rendered":"Simple "Call To Action" Button With CSS & jQuery"},"content":{"rendered":"

Call to action<\/strong> 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\u2019re going to create an effective and awesome call to action button with some CSS and jQuery<\/strong> that grab the user\u2019s attention and entice him to click .<\/p>\n

Throughout this tutorial we\u2019ll explain every line of used code with details and hope it will be useful for you. The following tutorial uses HTML, CSS and jQuery<\/em><\/strong> with difficulty level Beginner<\/em><\/strong> and an estimated completion time of 45 minutes<\/em><\/strong>.<\/em><\/p>\n

Download Tutorial (.zip)<\/a> or<\/em> Demo<\/a><\/p>\n

Part I \u2013 Create The Button Image<\/h2>\n

In this first part we will show you how to create the needed images with Photoshop in simple easy steps. Let\u2019s start.<\/p>\n

Create a new Photoshop document<\/strong> with a width of 580px and a height of 130px. Go to View<\/strong> > New Guide<\/strong> then, set the Orientation<\/strong> to Horizontal<\/strong> and the Position<\/strong> to 65px.<\/p>\n

<\/figure>\n

Create more guides<\/strong>; each for the top, bottom, left and right. Your image should have these following guides once you are done:<\/p>\n

<\/figure>\n

The guides appear to split your canvas into top and bottom halves. Select the Rounded Rectangular Tool<\/strong>, set the Radius<\/strong> to 5px and draw a rectangular shape on the top half of the canvas.<\/p>\n

<\/figure>\n

Change the Styles for Gradient Overlay<\/strong> and Stroke<\/strong>.<\/p>\n

<\/figure>\n
<\/figure>\n

Select the Type<\/strong> Tool and type \u201cDownload<\/em>\u201d 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:<\/p>\n

<\/figure>\n

We finished the creation of the first state of the download button. Let\u2019s create a new group<\/strong> and move all layers into it. Duplicate the group<\/strong> and then position it under the first group. we\u2019ve created.<\/p>\n

<\/figure>\n

Head over to the duplicated group and change the Gradient Overlay<\/strong> and Stroke<\/strong> style of the our second rectangular box (the hovered one) with the following setttings:<\/p>\n

<\/figure>\n
<\/figure>\n

With the second group selected, use Move<\/strong> tool to move the entire rectangular box down to the second half of the canvas.<\/p>\n

<\/figure>\n

That\u2019s it! We finished with the first part. Save your image as download.png<\/strong><\/em> and fire up your favorite code editor.<\/p>\n

Download PSD<\/a><\/p>\n

Part II \u2013 The HTML<\/h2>\n

Step 1 \u2013 Prepare the necessary Files<\/h3>\n

Create a folder, and give it a name. We\u2019ll name it jQueryCallToaction<\/strong> for this tutorial. Inside jQueryCallToaction<\/strong> folder, create these following files\/ folders:<\/p>\n

    \n
      \n
    1. Blank HTML file, index.html<\/code><\/li>\n
    2. Blank CSS file, style.css<\/code><\/li>\n
    3. Blank JavaScript file, script.js<\/code><\/li>\n
    4. Folder, named \"images<\/strong>\"<\/li>\n
    5. Place download.png<\/em> inside images<\/strong> folder.<\/li>\n<\/ol>\n<\/ol>\n

      Step 2 \u2013 Link index.html<\/code> with CSS & JS<\/h3>\n

      Let\u2019s link our CSS<\/strong> and JavaScript<\/strong> to index.html<\/code>. Place them inside <head><\/head><\/code>. We begin with the CSS file<\/strong>:<\/p>\n

      <link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" \/><\/pre>\n
      then the latest version of jQuery<\/strong> from Google\u2019s AJAX Libraries repository<\/a>:<\/p>\n
      <script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js\"><\/script><\/pre>\n
      and finally our JavaScript file<\/strong> :<\/p>\n
      <script type=\"text\/javascript\" src=\"script.js\"><\/script><\/pre>\n
      Now our <head><\/code> should look something like this :<\/p>\n
      \r\n <head>\r\n <script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"script.js\"><\/script>\r\n <link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <\/head>\r\n <\/pre>\n
      Let\u2019s put codes for the our buttons inside <body><\/code> tag :<\/p>\n
      \r\n <p><a href=\"#\" class=\"button1\"><\/a><\/p> <!-- CSS only -->\r\n <p class=\"button2\"><a href=\"#\"><\/a><\/p> <!-- CSS + jQuery --><\/pre>\n
      Explanation:<\/strong> We\u2019ve created paragraphs for two buttons, each wrapped with <p><\/p><\/code> with hyperlink <a><\/a><\/code> inside.\n  Line 1: class=\"button1\"<\/code> is placed inside <a><\/code>, while\n  Line 2: class=\"button1\"<\/code> is placed inside <p><\/code>\n<\/p>\n
      Step 3.1 \u2013 CSS only Button<\/h3>\n
      We will create our first button, using CSS only. Open up style.css<\/code> and paste the following codes inside.<\/p>\n
      \r\n .button1 \/bin \/boot \/dev \/etc \/home \/initrd.img \/initrd.img.old \/lib \/lib64 \/lost+found \/media \/mnt \/opt \/proc \/root \/run \/sbin \/snap \/srv \/sys \/tmp \/usr \/var \/vmlinuz \/vmlinuz.old Button with CSS only _old\/ \r\n {\r\n background: url(images\/download.png) 0 0;\r\n height:65px;\r\n width:580px;\r\n display:block;\r\n }\r\n .button1:hover \/bin \/boot \/dev \/etc \/home \/initrd.img \/initrd.img.old \/lib \/lib64 \/lost+found \/media \/mnt \/opt \/proc \/root \/run \/sbin \/snap \/srv \/sys \/tmp \/usr \/var \/vmlinuz \/vmlinuz.old mouseOver _old\/ \r\n {\r\n background: url(images\/download.png) 0 65px;\r\n }\r\n <\/pre>\n
      Explanation:<\/strong> Our first button is a 100% HTML\/CSS button. CSS property background<\/code> loads the download.png<\/em> image with exactly the image\u2019s width<\/code> 580px but only half the height<\/code> 65px (130\/2) so only one of the two buttons in download.png<\/em> is displayed. Button\u2019s position is determined and controlled by the last value of background<\/code> property. Think of the last value of background<\/code> property as where (in terms of height position in pixel) the image should start from.\n<\/p>\n
      Step 3.2 \u2013 CSS + jQuery Button<\/h3>\n
      We\u2019ll be using the same image download.png<\/em> for our second button. The difference here is: our second button will be injected with jQuery effect to make the animation smoother. Let\u2019s start with the CSS<\/strong>. Place the follow codes inside style.css<\/code>.<\/p>\n
      \r\n .button2, .button2 a {\r\n background: url(images\/download.png) 0 -65px;\r\n height:65px;\r\n width:580px;\r\n display:block;\r\n }\r\n .button2 a {\r\n background-position: 0 0;\r\n }\r\n <\/pre>\n
      Explanation:<\/strong> Basically both .button2 {}<\/code> and .button2 a {}<\/code> shares the same style except for the last value in background<\/code> property. .button2 {}<\/code> displays the blue color button while.button2 a {}<\/code> displays white color button.<\/p>\n
      <\/figure>\n
      CSS part is done. We\u2019ll use jQuery to swap between both states to create a smooth transition effect. Open up script.js<\/code> and put the following code inside.<\/p>\n
      \r\n $(document).ready(function(){\r\n $('.button2 a').hover(function(){\r\n $(this).stop().animate({'opacity' : '0'}, 500);\r\n }, function(){$(this).stop().animate({'opacity' : '1'}, 500);});\r\n });<\/pre>\n
      Explanation:<\/strong> $(this)<\/code><\/span> refer to .button2 a<\/code><\/span> and when it is hovered, we are going to use the jQuery animation to set the opacity of this element to 0<\/code> so we can see the .button2<\/code> element (blue button). And when the mouse is out we are going to setback the opacity to 1<\/code> with 500<\/code> milliseconds for the animation speed.\n<\/p>\n
      That\u2019s it !<\/h2>\n
      Thanks for following this tutorial. I hope you liked it and managed to follow it step by step. If you\u2019ve done everything correctly, you should have ended up with something like this<\/a>. If you have any problem or you need some help feel free to write your question into the comments section.<\/p>\n
      Here are a re-cap of all required files for this tutorial:<\/p>\n