{"id":11259,"date":"2012-03-06T21:02:43","date_gmt":"2012-03-06T13:02:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11259"},"modified":"2024-05-16T11:50:14","modified_gmt":"2024-05-16T03:50:14","slug":"design-winning-buy-button-tips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/","title":{"rendered":"5 Tips to Designing The Winning &#8220;Buy Button&#8221;"},"content":{"rendered":"<p>If you are a web designer, online marketer, or a website owner aiming to <a href=\"https:\/\/www.hongkiat.com\/blog\/boosting-online-sales-revenue\/\">boost sales<\/a>, crafting an effective \u201cbuy button\u201d is pivotal. Simply using the \u201cbuy now\u201d phrase on a standard blue button might not yield the desired outcomes.<\/p>\n<p>However, with a dash of basic knowledge, designing a compelling \u201cbuy button\u201d becomes manageable. The crux lies in its text. A visually stunning button is futile if its text conveys a negative message. The right copy is the game-changer.<\/p>\n<p>In this guide, we will explore <strong>5 key characteristics<\/strong> of a successful \u201cbuy button\u201d. Dive in!<\/p>\n<h2>1. Distinctive Design<\/h2>\n<p>The primary consideration for a \u201cbuy button\u201d is its overall style. This cannot be stressed enough. It is paramount to make your button unforgettable.<\/p>\n<p>The idea is to fashion your button as a <strong>purple cow<\/strong>, a concept introduced by Seth Godin. This means crafting a button so distinctive that it\u2019s impossible to ignore, akin to spotting a purple cow amidst a herd.<\/p>\n<p>Many designers fall into the trap of designing a button that seamlessly blends with the website\u2019s theme and colors. While this might seem like an apt approach, it isn\u2019t always effective. The challenge is that such buttons tend to become inconspicuous.<\/p>\n<p>The goal is to create a button that asserts its presence, rather than merely complementing the website\u2019s design. Think of it as an independent element that has its own significance, rather than a mere accessory.<\/p>\n<p>For instance, consider the button design of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/\">Mozilla Firefox<\/a>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg\" width=\"500\" height=\"328\" alt=\"Distinctive Firefox Download Button\"><\/figure>\n<p>Observe the download button on the left. Its design starkly contrasts with the rest of the page. It is the sole green element, prominently features the Firefox logo, is larger than most elements, and is strategically placed above the fold. All these characteristics make this button incredibly noticeable \u2013 a true purple cow. If you claim not to notice it, you\u2019re likely just posturing.<\/p>\n<p>In essence: <strong>Strive for a standout button<\/strong>.<\/p>\n<h2>2. Appearance<\/h2>\n<p>First, let\u2019s discuss <strong>color<\/strong>. To truly make a statement, opt for a color not already dominant on your webpage. For instance, Firefox brilliantly utilizes a distinctive color for its button. Tools like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/paletton.com\/#uid=1000u0kllllaFw0g0qFqFg0w0aF\">Paletton<\/a> can assist in selecting a color that contrasts with your website\u2019s palette while still being aesthetically pleasing.<\/p>\n<p>Difference is essential. If your website predominantly features blue, steer clear of blue buttons or even blue tinges. Go bold with hues like pink or orange. To illustrate, orange, second only to red in terms of visibility, is a popular choice \u2013 notably seen on <strong>amazon.com<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/amazon-orange-button.jpg\" width=\"500\" height=\"277\" alt=\"Prominent Amazon Orange Button\"><\/figure>\n<p>Another vital aspect is <strong>size<\/strong>. A cardinal rule? Bigger is generally better. During the design process, continuously ask, <em>\u201cCan this be magnified?\u201d<\/em><\/p>\n<p>When it comes to design \u2013 <strong>simple or elaborate<\/strong>? While some flair is acceptable (like the Firefox button with its striking fox), the design shouldn\u2019t compromise the button\u2019s primary function. If it no longer resembles a clickable button, users will overlook it.<\/p>\n<p>Determining whether a simplistic or elaborate design works best requires experimentation. Split testing is a practical approach. Develop two variations, one straightforward and another more intricate, and gauge their performance. Tools like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/marketingplatform.google.com\/about\/optimize\/?utm_source%3Dproduct%26utm_medium%3Demail%26utm_campaign%3D2019-q2-gbl-all-optimize%26utm_content%3Dcontent-experiments-is-being-replaced-with-optimize\">Google Website Optimizer<\/a> can aid in this evaluation.<\/p>\n<p>For reference, consider the minimalist button design from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.brizy.io\/layouts\/\">ThemeFuse<\/a>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/themefuse-button.jpg\" width=\"500\" height=\"209\" alt=\"Simplistic ThemeFuse Button\"><\/figure>\n<p>This button, devoid of any flashy design elements, still commands attention. Notably, ThemeFuse provides user-friendly shortcodes, simplifying the creation of appealing buttons. With just a single line of code:<\/p>\n<pre><code>[button link=\"domain.com\" class=\"btn_orange\"]Click here to buy my fantastic product![\/button]<\/code><\/pre>\n<p>This results in:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" title=\"themefuse button example\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/themefuse-button-example.png\" alt=\"Effective ThemeFuse Button Sample\" width=\"374\" height=\"55\"><\/figure>\n<h2>3. Typography Choices<\/h2>\n<p>The choice of <strong>font<\/strong> can significantly impact the effectiveness of a button. For digital platforms, <a href=\"https:\/\/www.hongkiat.com\/blog\/sans-serif-fonts\/\">sans-serif fonts<\/a> reign supreme owing to their readability. Conversely, serif fonts are more suited for print materials.<\/p>\n<p>The button\u2019s text should stand out, being arguably the most crucial content element on the page. Avoid all-caps; instead, opt for mixed-case, where the first letter of significant words is capitalized, leaving out conjunctions and prepositions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/sans-serif-fonts.jpg\" width=\"500\" height=\"185\" alt=\"Examples of Sans-serif Fonts\"><\/figure>\n<p>For safe and universally recognized options, consider fonts such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp\">Arial, Helvetica, Franklin Gothic, Myriad<\/a>, among other classic sans-serif choices.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-fonts-designers\/\">45 Free Fonts for Web Designers (Updated)<\/a>\n\t\t\t\t<\/p>\n<p>Moving on to text color, it\u2019s imperative to ensure a high contrast with the button\u2019s background. Avoid similar hues like gray-on-gray. Instead, aim for combinations like black-on-white or blue-on-orange, enhancing legibility.<\/p>\n<p>In summary, prioritize readability in every design choice.<\/p>\n<h2>4. Strategic Positioning<\/h2>\n<p>While the ideal button placement largely depends on your website\u2019s design, some universal principles can guide you to the right choice.<\/p>\n<p>Always opt for the <strong>most intuitive location<\/strong>. Avoid overthinking or trying too hard to be innovative. The button\u2019s placement should immediately resonate with the user.<\/p>\n<p>Users often have expectations based on common website designs \u2013 for instance, anticipating the logo in the top-left corner, shopping cart summary in the top-right, or copyright details in the footer. Your objective is to discern the most intuitive spot for a buy button and place it there.<\/p>\n<p>Moreover, the button\u2019s position should ensure its maximum visibility. This involves:<\/p>\n<ol>\n<li>Ensuring the button is <strong>above the fold<\/strong> to capture immediate attention.<\/li>\n<li>Embracing <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/designing-content-intensive-layout-tips-and-examples\/\" rel=\"noopener\">whitespace<\/a>. A clutter-free design enhances user experience. Prioritize the essential elements and eliminate the unnecessary.<\/li>\n<\/ol>\n<p>For an even more effective strategy, consider duplicating the button, placing it both at the top and bottom of the page. This ensures users can easily take action even after scrolling through the entire content.<\/p>\n<h2>5. Enhancing with Extra Elements<\/h2>\n<p>Adding additional elements to your button can enhance its visibility and appeal. Common supplementary elements include <strong>arrows, shopping carts, magnifying glasses, plus signs, and brand-specific icons<\/strong>.<\/p>\n<p>An illustrative example is Firefox\u2019s use of its vibrant orange fox logo. The key is to incorporate elements that <strong>underscore the button\u2019s primary function<\/strong>. For instance, downward-facing arrows are fitting for download buttons, while a shopping cart icon pairs well with add-to-cart buttons, as seen with Amazon.<\/p>\n<p>Here are some examples of buttons enhanced with supplementary elements:<\/p>\n<p><strong>Wakeinteractive<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/button-extra-1.jpg\" alt=\"Wakeinteractive Button Design\" width=\"317\" height=\"200\"><\/figure>\n<p><strong>Commercialiq<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/button-extra-2.jpg\" alt=\"Commercialiq Button Design\" width=\"224\" height=\"97\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mediatemple.net\/webhosting\/vps-hosting\">Mediatemple<\/a><\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/media-temple.jpg\" alt=\"Mediatemple Button Design\" width=\"300\" height=\"91\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.unlocking.com\/\">Unlocking.com<\/a><\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/unlocking.jpg\" alt=\"Unlocking.com Button Design\" width=\"300\" height=\"101\"><\/figure>\n<p><strong>Sofasurfer.eu<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/sofasurfer.jpg\" alt=\"Sofasurfer.eu Button Design\" width=\"390\" height=\"178\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/RonnieSan\/uploadify\">Uploadify<\/a><\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/uploadify.jpg\" alt=\"Uploadify Button Design\" width=\"300\" height=\"101\"><\/figure>\n<h2>The Influence of \u201cFree\u201d<\/h2>\n<p>The word <strong>\u201cFree\u201d<\/strong> carries immense power in the English language. When an offer is marked as free, it tends to elicit an often-irrational response from individuals. For more insights on this behavior, refer to <strong>Dan Ariely<\/strong>\u2018s book, \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.amazon.com\/Upside-Irrationality-Unexpected-Benefits-Defying\/dp\/0061995037\">The Upside of Irrationality<\/a>.\u201d<\/p>\n<p>Here are some examples that leverage the allure of \u201cFree\u201d:<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/freshbooks\">Freshbooks<\/a><\/strong><\/p>\n<figure><a href=\"https:\/\/www.hongkiat.com\/blog\/go\/freshbooks\" rel=\"nofollow noopener\" target=\"_blank\" class=\"js-aw-brand-link\" data-feed=\"NwcTbnuIf8MC0TkkS78vJe8tzBoHcg1a\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/button-free-1.png\" alt=\"Freshbooks Free Button Design\" width=\"241\" height=\"67\"><\/a><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.wufoo.com\/\">Wufoo<\/a><\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/button-free-2.png\" alt=\"Wufoo Free Button Design\" width=\"227\" height=\"115\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeagent.com\/features\/dashboard\/\">Freeagent.com<\/a><\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/freeagent.jpg\" alt=\"Freeagent.com Free Button Design\" width=\"300\" height=\"83\"><\/figure>\n<p><strong>Note:<\/strong> This post was first published on the Mar 6, 2012.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective \u201cbuy button\u201d is pivotal. Simply using the \u201cbuy now\u201d phrase on a standard blue button might not yield the desired outcomes. However, with a dash of basic knowledge, designing a compelling \u201cbuy button\u201d becomes manageable. The&hellip;<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[4655,298],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Tips to Designing The Winning &quot;Buy Button&quot; - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective &quot;buy button&quot; is pivotal. Simply using the &quot;buy\" \/>\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\/design-winning-buy-button-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Tips to Designing The Winning &quot;Buy Button&quot;\" \/>\n<meta property=\"og:description\" content=\"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective &quot;buy button&quot; is pivotal. Simply using the &quot;buy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/\" \/>\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=\"2012-03-06T13:02:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-16T03:50:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg\" \/>\n<meta name=\"author\" content=\"Karol K\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@carlosinho\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Karol K\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/\"},\"author\":{\"name\":\"Karol K\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a45d15f8a7ad57d3914307d35c82d00d\"},\"headline\":\"5 Tips to Designing The Winning &#8220;Buy Button&#8221;\",\"datePublished\":\"2012-03-06T13:02:43+00:00\",\"dateModified\":\"2024-05-16T03:50:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/\"},\"wordCount\":1028,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/winning-buy-button\\\/firefox-green-download-button.jpg\",\"keywords\":[\"appwiki\",\"Buttons\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/\",\"name\":\"5 Tips to Designing The Winning \\\"Buy Button\\\" - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/winning-buy-button\\\/firefox-green-download-button.jpg\",\"datePublished\":\"2012-03-06T13:02:43+00:00\",\"dateModified\":\"2024-05-16T03:50:14+00:00\",\"description\":\"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective \\\"buy button\\\" is pivotal. Simply using the \\\"buy\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/winning-buy-button\\\/firefox-green-download-button.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/winning-buy-button\\\/firefox-green-download-button.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-winning-buy-button-tips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Tips to Designing The Winning &#8220;Buy Button&#8221;\"}]},{\"@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\\\/a45d15f8a7ad57d3914307d35c82d00d\",\"name\":\"Karol K\",\"description\":\"Karol is a blogger and writer, passionate about entrepreneurship and using the internet as a business tool. He is part of WebNet Hosting - one of the leading providers of FFMpeg hosting. To find out what he is up to, you can also visit him at newinternetorder.com.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/carlosinho\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/karolk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Tips to Designing The Winning \"Buy Button\" - Hongkiat","description":"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective \"buy button\" is pivotal. Simply using the \"buy","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\/design-winning-buy-button-tips\/","og_locale":"en_US","og_type":"article","og_title":"5 Tips to Designing The Winning \"Buy Button\"","og_description":"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective \"buy button\" is pivotal. Simply using the \"buy","og_url":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-03-06T13:02:43+00:00","article_modified_time":"2024-05-16T03:50:14+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg","type":"","width":"","height":""}],"author":"Karol K","twitter_card":"summary_large_image","twitter_creator":"@carlosinho","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Karol K","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/"},"author":{"name":"Karol K","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a45d15f8a7ad57d3914307d35c82d00d"},"headline":"5 Tips to Designing The Winning &#8220;Buy Button&#8221;","datePublished":"2012-03-06T13:02:43+00:00","dateModified":"2024-05-16T03:50:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/"},"wordCount":1028,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg","keywords":["appwiki","Buttons"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/","url":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/","name":"5 Tips to Designing The Winning \"Buy Button\" - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg","datePublished":"2012-03-06T13:02:43+00:00","dateModified":"2024-05-16T03:50:14+00:00","description":"If you are a web designer, online marketer, or a website owner aiming to boost sales, crafting an effective \"buy button\" is pivotal. Simply using the \"buy","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/winning-buy-button\/firefox-green-download-button.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Tips to Designing The Winning &#8220;Buy Button&#8221;"}]},{"@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\/a45d15f8a7ad57d3914307d35c82d00d","name":"Karol K","description":"Karol is a blogger and writer, passionate about entrepreneurship and using the internet as a business tool. He is part of WebNet Hosting - one of the leading providers of FFMpeg hosting. To find out what he is up to, you can also visit him at newinternetorder.com.","sameAs":["https:\/\/x.com\/carlosinho"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/karolk\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2VB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11259","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\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=11259"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11259\/revisions"}],"predecessor-version":[{"id":71898,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11259\/revisions\/71898"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=11259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=11259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=11259"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=11259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}