{"id":10968,"date":"2022-10-18T16:43:30","date_gmt":"2022-10-18T09:43:30","guid":{"rendered":"https:\/\/rometheme.net\/?p=10968"},"modified":"2025-04-07T04:30:49","modified_gmt":"2025-04-07T04:30:49","slug":"three-design-principles-of-button-design","status":"publish","type":"post","link":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/","title":{"rendered":"Three Design Principles of Button Design"},"content":{"rendered":"\n
1.  Identifiable<\/h5>\n\n\n\n

Designing with mobile users in mind should be a priority as more than 48 percent of page views worldwide are via mobile devices. Your buttons should be touch-friendly for mobile users and clickable for desktop users.<\/p>\n\n\n\n

Unlike desktop users, mobile users do not have the opportunity to hover over elements to check for interactivity. Therefore make sure your buttons appear interactive to the user.<\/p>\n\n\n\n

Size<\/h6>\n\n\n\n

A study by the MIT Touch Lab shows that 10mm x 10mm is the best minimum size for a button due to the average size of a fingertip.<\/p>\n\n\n\n

In the example below we can see how easy it is for the user to interact with the larger button. Therefore, the button must have a touch target of at least 38px by 38px.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n
Shape<\/h6>\n\n\n\n

The most popular button shapes are square or square with rounded corners. Rounded corners seem to have an advantage over square corners. Research shows rounded corners make information easier to process by drawing our attention to the content of an element.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n
2. Findable<\/h5>\n\n\n\n

Buttons should be easy for users to find. UX designers agree that you shouldn’t make users look for buttons.<\/p>\n\n\n\n

It’s also important to be consistent across your site or app with button placement. If one form has the main call-to-action on the right and the other on the left, it will confuse the user.<\/p>\n\n\n\n

3. Clear<\/h5>\n\n\n\n

Button actions and status should be clear so that users know and understand what actions they have taken on your site.<\/p>\n\n\n\n

Here are some design tips and tricks to help with this process:<\/p>\n\n\n\n

Color<\/h6>\n\n\n\n

Certain colors have special meanings that users are used to seeing. Red, for example, is usually used to signify wrongdoing or destructive actions. Green on the other hand usually signifies a successful action. Using conventions like this makes it easier for users to understand the actions and state of the buttons.<\/p>\n\n\n\n

Microcopy<\/h6>\n\n\n\n

Ideally, button labels should not wrap around multiple lines. Keep them in one line to improve user readability.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n
Hierarchy<\/h6>\n\n\n\n

Buttons need not only to be distinguished from other elements on the page but also from each other because multiple buttons are often grouped together. For example, a primary action button should be more visually dominant than a secondary or tertiary action button.<\/p>\n\n\n\n

In the example below, the ‘Add more’ and ‘Call to action’ buttons are similar in style and close together. This is likely to confuse users and result in them selecting the wrong button because they are not visually different enough from each other.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n
Type<\/h6>\n\n\n\n

Button types help indicate their importance and functionality. Some examples include text, ghost, toggle, and floating, which we will develop and discuss their respective benefits in the next article.<\/p>\n\n\n\n

Order<\/h6>\n\n\n\n

The order of the buttons is important to achieve a visual hierarchy. When making an ordering decision, it is important to note that most users expect first-listed content to be of high priority, and last-listed content to be of low priority.<\/p>\n\n\n\n

State<\/h6>\n\n\n\n

Buttons are multi-state elements. It is important to make this state clear to the user. We can do this by sticking to conventions that conform to user expectations such as disabled buttons appearing grayed out and focus elements containing a blue ring.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n
Feedback<\/h6>\n\n\n\n

After clicking or tapping a button, the user expects a response in the form of visual or audio feedback, depending on the action.<\/p>\n\n\n\n

Feedback includes everything from the state change shown above to behavior such as progress or error animation.<\/p>\n\n\n\n

\"\"
Pic source: 3 Simple Tips on UX Button Design by Kalamuna.com<\/a><\/figcaption><\/figure>\n\n\n\n

We hope that after reading this article, you will find inspiration in creating button designs in your UI projects. Remember the most important thing is the ease and convenience of your app users.<\/p>\n\n\n\n

Source: kalamuna.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

1.  Identifiable Designing with mobile users in mind should be a priority as more than 48 percent of page views worldwide are via mobile devices. Your buttons should be touch-friendly for mobile users and clickable for desktop users. Unlike desktop users, mobile users do not have the opportunity to hover over elements to check for […]<\/p>\n","protected":false},"author":1,"featured_media":10981,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[160,144,36,211,37,313,433,60,434,76,435,239,87,136],"class_list":["post-10968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-app","tag-button","tag-color","tag-cta","tag-design","tag-hierarchy","tag-principles","tag-shape","tag-size-button","tag-type","tag-user-interface","tag-ux","tag-web","tag-website"],"yoast_head":"\nThree Design Principles of Button Design - Rometheme Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three Design Principles of Button Design - Rometheme Blog\" \/>\n<meta property=\"og:description\" content=\"1.  Identifiable Designing with mobile users in mind should be a priority as more than 48 percent of page views worldwide are via mobile devices. Your buttons should be touch-friendly for mobile users and clickable for desktop users. Unlike desktop users, mobile users do not have the opportunity to hover over elements to check for […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Rometheme Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/groups\/1039541754019284\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-18T09:43:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-07T04:30:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1365\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"rtmstd\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rtmstd\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\"},\"author\":{\"name\":\"rtmstd\",\"@id\":\"https:\/\/rometheme.net\/blog\/#\/schema\/person\/b531589174147795651fae3994140607\"},\"headline\":\"Three Design Principles of Button Design\",\"datePublished\":\"2022-10-18T09:43:30+00:00\",\"dateModified\":\"2025-04-07T04:30:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\"},\"wordCount\":683,\"publisher\":{\"@id\":\"https:\/\/rometheme.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg\",\"keywords\":[\"app\",\"button\",\"color\",\"CTA\",\"design\",\"hierarchy\",\"principles\",\"Shape\",\"size button\",\"Type\",\"user interface\",\"ux\",\"web\",\"website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\",\"url\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\",\"name\":\"Three Design Principles of Button Design - Rometheme Blog\",\"isPartOf\":{\"@id\":\"https:\/\/rometheme.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg\",\"datePublished\":\"2022-10-18T09:43:30+00:00\",\"dateModified\":\"2025-04-07T04:30:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage\",\"url\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg\",\"contentUrl\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg\",\"width\":2048,\"height\":1365},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rometheme.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Three Design Principles of Button Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rometheme.net\/blog\/#website\",\"url\":\"https:\/\/rometheme.net\/blog\/\",\"name\":\"Rometheme Blog\",\"description\":\"Explore the best design inspiration, tips & tutorials, resources, and more news & updates from Rometheme\",\"publisher\":{\"@id\":\"https:\/\/rometheme.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rometheme.net\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rometheme.net\/blog\/#organization\",\"name\":\"Rometheme Blog\",\"url\":\"https:\/\/rometheme.net\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rometheme.net\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2025\/04\/LOGO-RTM-BLOG.png\",\"contentUrl\":\"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2025\/04\/LOGO-RTM-BLOG.png\",\"width\":400,\"height\":70,\"caption\":\"Rometheme Blog\"},\"image\":{\"@id\":\"https:\/\/rometheme.net\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/groups\/1039541754019284\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/rometheme.net\/blog\/#\/schema\/person\/b531589174147795651fae3994140607\",\"name\":\"rtmstd\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rometheme.net\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7354ab2fcb826469bdceae1823304483da9d7d001a4be19db76d240b77239d25?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7354ab2fcb826469bdceae1823304483da9d7d001a4be19db76d240b77239d25?s=96&d=mm&r=g\",\"caption\":\"rtmstd\"},\"sameAs\":[\"https:\/\/rometheme.net\/blog\"],\"url\":\"https:\/\/rometheme.net\/blog\/author\/rtmstd\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Three Design Principles of Button Design - Rometheme Blog","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:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/","og_locale":"en_US","og_type":"article","og_title":"Three Design Principles of Button Design - Rometheme Blog","og_description":"1.  Identifiable Designing with mobile users in mind should be a priority as more than 48 percent of page views worldwide are via mobile devices. Your buttons should be touch-friendly for mobile users and clickable for desktop users. Unlike desktop users, mobile users do not have the opportunity to hover over elements to check for […]","og_url":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/","og_site_name":"Rometheme Blog","article_publisher":"https:\/\/www.facebook.com\/groups\/1039541754019284","article_published_time":"2022-10-18T09:43:30+00:00","article_modified_time":"2025-04-07T04:30:49+00:00","og_image":[{"width":2048,"height":1365,"url":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg","type":"image\/jpeg"}],"author":"rtmstd","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rtmstd","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#article","isPartOf":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/"},"author":{"name":"rtmstd","@id":"https:\/\/rometheme.net\/blog\/#\/schema\/person\/b531589174147795651fae3994140607"},"headline":"Three Design Principles of Button Design","datePublished":"2022-10-18T09:43:30+00:00","dateModified":"2025-04-07T04:30:49+00:00","mainEntityOfPage":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/"},"wordCount":683,"publisher":{"@id":"https:\/\/rometheme.net\/blog\/#organization"},"image":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage"},"thumbnailUrl":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg","keywords":["app","button","color","CTA","design","hierarchy","principles","Shape","size button","Type","user interface","ux","web","website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/","url":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/","name":"Three Design Principles of Button Design - Rometheme Blog","isPartOf":{"@id":"https:\/\/rometheme.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage"},"image":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage"},"thumbnailUrl":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg","datePublished":"2022-10-18T09:43:30+00:00","dateModified":"2025-04-07T04:30:49+00:00","breadcrumb":{"@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#primaryimage","url":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg","contentUrl":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2022\/10\/Cover-artikel-2-scaled-1.jpg","width":2048,"height":1365},{"@type":"BreadcrumbList","@id":"https:\/\/rometheme.net\/blog\/uncategorized\/three-design-principles-of-button-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rometheme.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Three Design Principles of Button Design"}]},{"@type":"WebSite","@id":"https:\/\/rometheme.net\/blog\/#website","url":"https:\/\/rometheme.net\/blog\/","name":"Rometheme Blog","description":"Explore the best design inspiration, tips & tutorials, resources, and more news & updates from Rometheme","publisher":{"@id":"https:\/\/rometheme.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rometheme.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/rometheme.net\/blog\/#organization","name":"Rometheme Blog","url":"https:\/\/rometheme.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rometheme.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2025\/04\/LOGO-RTM-BLOG.png","contentUrl":"https:\/\/rometheme.net\/blog\/wp-content\/uploads\/2025\/04\/LOGO-RTM-BLOG.png","width":400,"height":70,"caption":"Rometheme Blog"},"image":{"@id":"https:\/\/rometheme.net\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/groups\/1039541754019284"]},{"@type":"Person","@id":"https:\/\/rometheme.net\/blog\/#\/schema\/person\/b531589174147795651fae3994140607","name":"rtmstd","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rometheme.net\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7354ab2fcb826469bdceae1823304483da9d7d001a4be19db76d240b77239d25?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7354ab2fcb826469bdceae1823304483da9d7d001a4be19db76d240b77239d25?s=96&d=mm&r=g","caption":"rtmstd"},"sameAs":["https:\/\/rometheme.net\/blog"],"url":"https:\/\/rometheme.net\/blog\/author\/rtmstd\/"}]}},"_links":{"self":[{"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/posts\/10968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/comments?post=10968"}],"version-history":[{"count":1,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/posts\/10968\/revisions"}],"predecessor-version":[{"id":24536,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/posts\/10968\/revisions\/24536"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/media\/10981"}],"wp:attachment":[{"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/media?parent=10968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/categories?post=10968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rometheme.net\/blog\/wp-json\/wp\/v2\/tags?post=10968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}