{"id":6587,"date":"2010-03-13T01:40:56","date_gmt":"2010-03-12T17:40:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=6587"},"modified":"2023-04-06T19:14:35","modified_gmt":"2023-04-06T11:14:35","slug":"call-to-action-buttons-guidelines-best-practices-and-examples","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/","title":{"rendered":"Effective Call to Action Buttons: Tips and Examples"},"content":{"rendered":"

Call to action buttons on websites are often neglected.<\/strong> Designers sometimes don\u2019t understand exactly what makes a good call to action button beyond being attractive and fitting into the overall design. But call to action buttons are too important to be designed without some kind of understanding of what makes them effective. After all, the main point of a call to action button is to get visitors to do<\/em><\/strong> something.<\/p>\n

It\u2019s important to gain at least a basic understanding of how color, scale, language, and other factors influence the conversion rate of a call to action button. The concepts here aren\u2019t complicated, but they do take a bit of forethought and planning to create the most effective call to action buttons possible within a given design. Read on for more information on each of these points and more.<\/p>\n

The Purpose of \"Call to Action\" Buttons<\/h2>\n

Call to action buttons can serve a variety of functions. After all, \u201ccall to action\u201d is really a bit vague. All it means is that it\u2019s main purpose is to get a visitor to your site to do something<\/em>. That something could be adding a product to their shopping cart, downloading something, requesting information, or just about anything else.<\/p>\n

\"avantirestaurant\"<\/figure>\n

Because call to action buttons have such varied purposes, a lot of consideration has to go into what the button aims to achieve. The type of site, the target market, and the desired action can all play a role in how to best design a call to action button.<\/p>\n

Types of \"Call to Action\" Buttons<\/h2>\n

There are a few different types of call to action buttons. While each type aims to get visitors to perform a certain action, that action can vary considerably. Below are the most common types of call to action buttons, based on the action they want you to take.<\/p>\n

\"noded\"<\/figure>\n

1. Add to Cart Buttons<\/h3>\n

E-commerce sites generally use a number of call to action buttons, but the most widely-used one is the \u201cadd to cart<\/em><\/strong>\u201d button. These buttons generally appear on individual product pages. Their purpose is to entice customers to purchase an item. Common design elements in add to cart buttons include simple wording (such as \u201cAdd to Cart<\/em>\u201d or \u201cAdd to Bag<\/em>\u201d or \u201cBuy Now<\/em>\u201c) and the use of icons (usually a bag or cart).<\/p>\n

\"buynow\"<\/figure>\n

2. Download Buttons<\/h3>\n

Download buttons are similar to add to cart buttons in that they\u2019re trying to entice a visitor to take possession of an item. In the case of download buttons, many designers opt to include more information than other types of buttons (such as version information or download size).<\/p>\n

\"opera\"<\/figure>\n

3. Trial Buttons<\/h3>\n

Some sites try to entice their visitors to try their offerings, generally in the form of a free trial. This could be a free download or a free account, depending on the particular site. Some sites use the \u201cless-is-more\u201d philosophy and keep the language on their buttons to a minimum, while others like to offer more information on what the trial contains.<\/p>\n

\"trialbutton\"<\/figure>\n

4. Learn More Buttons<\/h3>\n

Learn more buttons are generally used at the end of a block of teaser information (often on the home page). These buttons are usually simple, but often oversized to attract visitor attention.<\/p>\n

\"learn<\/figure>\n

5. Sign Up Buttons<\/h3>\n

Sign up buttons appear most commonly in two different versions. The first type is usually directly associated with a sign up form. The second type is usually used in a similar fashion to \u201cadd to cart\u201d buttons, as a way for users to purchase or sign up for a service or account, before they actually reach a sign-up form.<\/p>\n

\"signupbutton\"<\/figure>\n

There are other types of call to action buttons, but these are the most common. Guidelines that apply to those above will likely also apply to any other type of call to action button you might be designing.<\/p>\n

Using Negative Space Effectively<\/h2>\n

You want your call to action buttons to stand out from the surrounding content and really command attention from your site visitors. To that end, you need to make use of negative space around those buttons. Incorporate blank space between your content and your call to action button. While this is less important (and less common) on some buttons, such as add to cart buttons, with others, like those to learn more, work better with more space.<\/p>\n

\"wufoo\"<\/figure>\n

It\u2019s important to balance the amount of negative space you have around the buttons with the size of the buttons themselves. It\u2019s about proportion. You want your button, the space around it, and the surrounding content to all look like they go together, even with disparities in size. You may have to fiddle around with things a bit in order to get them looking just right.<\/p>\n

Some guidelines:<\/strong><\/p>\n

    \n
  • Make sure there\u2019s enough space around your button so that it doesn\u2019t feel cluttered<\/li>\n
  • Consider principles like the rule of thirds or the Golden Ratio when determining how much space to include<\/li>\n
  • Negative space gives your call to action button room to stand out from your other content and sets it apart<\/li>\n<\/ul>\n

    Size and Color<\/h2>\n

    How large your call to action buttons are is very important. A button that\u2019s too large will overpower everything around it. A button that\u2019s too small will get lost in the shuffle of all the other content on a page. You want your button to be large enough to stand out without overwhelming the design.<\/p>\n

    \"ncover\"<\/figure>\n

    Color can be used to great effect to help balance the size of your buttons. For larger buttons, choose a color that\u2019s less prominent within your design (but still stands out again the background). For a smaller button, you may want to choose a brighter, contrasting color to really make the button pop. In either case, make sure the color you use sets the button apart without clashing with the site\u2019s overall design.<\/p>\n

    Some guidelines:<\/strong><\/p>\n

      \n
    • Your call to action buttons should ideally be the largest buttons on a given page<\/li>\n
    • Use contrasting colors to make smaller buttons stand out more<\/li>\n
    • Use less distinct colors to make oversized buttons fit in better<\/li>\n
    • You call to action buttons need to command attention without overwhelming your design<\/li>\n<\/ul>\n

      Language<\/h2>\n

      The exact wording you choose to use on your call to action buttons can have a huge effect on conversion. Compare \u201cBuy Now<\/em>\u201d with \u201cAdd to Cart<\/em>\u201c. One is much more urgent than the other one. Or how about \u201cTry it for Free<\/em>\u201d with \u201cFree Trial<\/em>\u201c? One is much punchier than the other and stands out more.<\/p>\n

      \"okini\"<\/figure>\n

      The language you use on your call to action buttons should be as straight-forward and simple as possible. You want visitors to know with just a glance exactly what they\u2019ll get when the click on a button. If they question it, that means they\u2019ve paused, which can lead to lower conversion rates.<\/p>\n

      Don\u2019t forget your font sizes, too. The text on your call to action button should be large and bold, properly suited to the size and color of the button itself. Make sure there\u2019s sufficient contrast and that the text is easy to read.<\/p>\n

      Some guidelines:<\/strong><\/p>\n

        \n
      • Use simple, direct language<\/li>\n
      • Use a large, bold font on the button for the main text<\/li>\n
      • Make sure the language clearly calls for a specific action<\/li>\n<\/ul>\n

        Create Urgency<\/h2>\n

        You want visitors on your site to carry out the desired actions with as little thought as possible. While you don\u2019t want to deceive your visitors, the more opportunities you give them to stop and consider what they\u2019re doing, the more opportunities you\u2019re giving them to say \u201cno\u201d.<\/p>\n

        \"highlandfling\"<\/figure>\n

        You want your buttons to give them the impression that they need to act right away. You want to encourage them to make their decision immediately, on the spur of the moment. While this won\u2019t work for every call to action button (especially those to purchase high-ticket items), for low-cost or free actions, having visitors click with little forethought is desirable.<\/p>\n

        Some guidelines:<\/strong><\/p>\n

          \n
        • Encourage your visitors to act immediately<\/li>\n
        • Don\u2019t give your visitors any reason to pause<\/li>\n
        • While urgency is important, don\u2019t mislead your visitors in any way<\/li>\n<\/ul>\n

          Provide Extra Information<\/h2>\n

          Where appropriate, use your call to action buttons to give visitors extra information about what they\u2019re going to get if they click on the button. This is most commonly seen with trial buttons or download buttons. Common examples of extra information include the length of time a free trial will last or the size of a file download. Version information is also commonly seen.<\/p>\n

          \"basecamp\"<\/figure>\n

          When including extra information, remember that you need to keep the focus on the actual call to action. Make sure that the text for the language enticing visitors to act is most prominent, with other information much less visible.<\/p>\n

          Some guidelines:<\/strong><\/p>\n

            \n
          • Only include extra information when it adds to the user experience<\/li>\n
          • Extra information is only appropriate on some types of call to action buttons, most notably download or trial buttons<\/li>\n
          • Make sure the main call to action is still the most prominent text on your button<\/li>\n<\/ul>\n

            Prioritize<\/h2>\n

            It\u2019s important to prioritize the call to action buttons on your page if there\u2019s more than one. This can be done in a number of ways, but the most common are through the use of color and size.<\/p>\n

            \"basecamp\"<\/figure>\n

            Use color to highlight the most important button on a page, or to make the less important ones seem less prominent. Or use size to make the most important button stand out (by making it larger) and de-emphasizing the less-important ones.<\/p>\n

            Icons and Images<\/h2>\n

            Including visual cues in your call to action buttons can also help to increase conversion rates. An icon of a shopping cart on an \u201cadd to cart\u201d button, for instance, or an arrow on a download button are both good examples. Think of unique icons to use, too, but make sure that the icon adds to the user experience by clarifying what the button is for, and doesn\u2019t add any confusion.<\/p>\n

            \"uploadify\"<\/figure>\n

            Some guidelines:<\/strong><\/p>\n

              \n
            • Make sure the icons you use help clarify your button\u2019s meaning, rather than confuse it<\/li>\n
            • Easily-recognized icons can immediately indicate meaning to your visitors<\/li>\n
            • Don\u2019t be afraid to use less-commonly used icons, as long as their meaning is still clear<\/li>\n<\/ul>\n

              Examples<\/h2>\n

              Here are a few examples of great call to action buttons<\/strong>. While they don\u2019t all perfectly conform to the guidelines above, they meet enough of the criteria to be considered great.<\/p>\n

              Livestream <\/h3>\n

              Differentiating the \"buy now\" (for paid options) and \"sign up\" (for free options) buttons is a good strategy.<\/p>\n

              \"livestream\"<\/figure>\n

              Windows<\/h3>\n

              The big, green \"Get Windows7\" button is easy for visitors to spot.<\/p>\n

              \"windows7\"<\/figure>\n

              Fileshare HQ<\/h3>\n

              The bright green button here really stands out against the white background.<\/p>\n

              \"filesharehq\"<\/figure>\n

              Logbook <\/h3>\n

              Using different colors for the \"Download\" and \"Buy\" buttons sets them apart and gives priority to the \"Buy\" button.<\/p>\n

              \"logbook\"<\/figure>\n

              TasteBook <\/h3>\n

              This button makes great use of an icon and uses larger, bold text to stand out.<\/p>\n

              \"tastebook\"<\/figure>\n

              GoodBarry <\/h3>\n

              Another bright green call to action button.<\/p>\n

              \"goodbarry\"<\/figure>\n

              Lifetree Creative <\/h3>\n

              Continuing the same typeface from the body copy to the call to action button creates a sense of cohesion.<\/p>\n

              \"lifetreecreative\"<\/figure>\n

              The Resumator <\/h3>\n

              A bright red call to action button with bold type stands out against the blue background.<\/p>\n

              \"resumator\"<\/figure>\n

              Notepod <\/h3>\n

              A good example of including extra information in a call to action button.<\/p>\n

              \"notepod\"<\/figure>\n

              Inkd <\/h3>\n

              A great example of prioritizing buttons with size.<\/p>\n

              \"inkd\"<\/figure>\n

              Elegant Themes <\/h3>\n

              Another excellent example of using color to stand out without clashing with surrounding design elements.<\/p>\n

              \"elegantthemes\"<\/figure>\n

              ZenDesk <\/h3>\n

              Another great example of making a button stand out using color.<\/p>\n

              \"zendesk\"<\/figure>\n

              Storenvy<\/h3>\n

              A round button is unexpected and stands out, especially when surrounded by a white border.<\/p>\n

              \"storenvy\"<\/figure>\n

              Bara\u2019Mail<\/h3>\n

              Sometimes a button that blends in works better in your overall site design, especially when the action is less urgent.<\/p>\n

              \"baramail\"<\/figure>","protected":false},"excerpt":{"rendered":"

              Call to action buttons on websites are often neglected. Designers sometimes don\u2019t understand exactly what makes a good call to action button beyond being attractive and fitting into the overall design. But call to action buttons are too important to be designed without some kind of understanding of what makes them effective. After all, the…<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[298,1402],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nEffective Call to Action Buttons: Tips and Examples - Hongkiat<\/title>\n<meta name=\"description\" content=\"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effective Call to Action Buttons: Tips and Examples\" \/>\n<meta property=\"og:description\" content=\"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2010-03-12T17:40:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:14:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg\" \/>\n<meta name=\"author\" content=\"Cameron Chapman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cameron Chapman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/\"},\"author\":{\"name\":\"Cameron Chapman\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/5bbd78382e713099f51b24d5713efb6a\"},\"headline\":\"Effective Call to Action Buttons: Tips and Examples\",\"datePublished\":\"2010-03-12T17:40:56+00:00\",\"dateModified\":\"2023-04-06T11:14:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/\"},\"wordCount\":1991,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/call-to-action-buttons\\\/avantirestaurant.jpg\",\"keywords\":[\"Buttons\",\"Call to Action\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/\",\"name\":\"Effective Call to Action Buttons: Tips and Examples - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/call-to-action-buttons\\\/avantirestaurant.jpg\",\"datePublished\":\"2010-03-12T17:40:56+00:00\",\"dateModified\":\"2023-04-06T11:14:35+00:00\",\"description\":\"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/call-to-action-buttons\\\/avantirestaurant.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/call-to-action-buttons\\\/avantirestaurant.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/call-to-action-buttons-guidelines-best-practices-and-examples\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effective Call to Action Buttons: Tips and Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/5bbd78382e713099f51b24d5713efb6a\",\"name\":\"Cameron Chapman\",\"description\":\"Cameron is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She's also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/cameron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Effective Call to Action Buttons: Tips and Examples - Hongkiat","description":"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/","og_locale":"en_US","og_type":"article","og_title":"Effective Call to Action Buttons: Tips and Examples","og_description":"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being","og_url":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2010-03-12T17:40:56+00:00","article_modified_time":"2023-04-06T11:14:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg","type":"","width":"","height":""}],"author":"Cameron Chapman","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Cameron Chapman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/"},"author":{"name":"Cameron Chapman","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/5bbd78382e713099f51b24d5713efb6a"},"headline":"Effective Call to Action Buttons: Tips and Examples","datePublished":"2010-03-12T17:40:56+00:00","dateModified":"2023-04-06T11:14:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/"},"wordCount":1991,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg","keywords":["Buttons","Call to Action"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/","url":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/","name":"Effective Call to Action Buttons: Tips and Examples - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg","datePublished":"2010-03-12T17:40:56+00:00","dateModified":"2023-04-06T11:14:35+00:00","description":"Call to action buttons on websites are often neglected. Designers sometimes don't understand exactly what makes a good call to action button beyond being","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/call-to-action-buttons\/avantirestaurant.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/call-to-action-buttons-guidelines-best-practices-and-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Effective Call to Action Buttons: Tips and Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/5bbd78382e713099f51b24d5713efb6a","name":"Cameron Chapman","description":"Cameron is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She's also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.","url":"https:\/\/www.hongkiat.com\/blog\/author\/cameron\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-1If","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/6587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=6587"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/6587\/revisions"}],"predecessor-version":[{"id":65858,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/6587\/revisions\/65858"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=6587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=6587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=6587"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=6587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}