--- title: The Two Button Problem – Frontend Masters Blog | daily.dev description: Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next.... canonical: https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Two Button Problem – Frontend Masters Blog | daily.dev og:description: Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next.... og:url: https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl og:image: https://api.daily.dev/og/posts/56I2s1WTL.png og:image:alt: The Two Button Problem – Frontend Masters Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Two Button Problem – Frontend Masters Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 4 min read · 122 upvotes · 6 comments ## Summary Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next. The problem is especially pronounced on devices without cursors (TVs, game consoles) where keyboard or remote navigation is required. Solutions include using consistent button styles with additive indicators for the active state, directional arrows, CSS media queries to detect input methods, and pressed/unpressed visual states for toggle buttons. The key principle is making the active state obviously distinct rather than relying on arbitrary style differences. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@jolenek** · 4 upvotes > This is why I simply hate smart TVs. I never know which button's in focus. **@lassep** · 1 upvotes > I would pretty much 100% of the time expect and will assume that, in that example image, the "try it free" is the one selected because its filled with the app theme color. However I wouldn't be surprised if I was wrong, because there have been apps which have reversed my expectations before. **@jarenwhitehouse** · 0 upvotes > This is so interesting. I've never thought of this. But yes, in a universe where information seems inherently binary, when two buttons represent a choice, two styles can't be the distinguisher! > > I really like the solutions here. Very well, articulated. **@sqlmancer** · 0 upvotes > I've seen sites where this kind of thing is a false dichotomy. Either button takes you to the same login screen. If it finds a matching account, it logs you in. If it doesn't, it creates one with the info you provided and starts your trial. **@neilhatly** · 0 upvotes > One of my personal bugbears, specially when it toggles between the two they both could kind of be toggled. Say for a yellow and a green button. ## Similar posts on daily.dev - [Building Better Buttons](https://daily.dev/posts/building-better-buttons-kfg2u6xfq) · Simple Thread · 68 upvotes · 5 comments - [When a disabled submit button becomes a dead end – Bogdan on Digital Accessibility \(A11y\)](https://daily.dev/posts/when-a-disabled-submit-button-becomes-a-dead-end-bogdan-on-digital-accessibility-a11y--yk2wkam8f) · Bogdan on A11y · 3 upvotes · 1 comments - [The Difference Between a Button and a Link](https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav) · Hacker News · 3 upvotes · 0 comments - [Two vs. Three-State Color Theme Toggles – Master.dev Blog](https://daily.dev/posts/two-vs-three-state-color-theme-toggles-master-dev-blog-561lejywm) · Frontend Masters · 8 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#ux](https://daily.dev/tags/ux), [#ui-design](https://daily.dev/tags/ui-design), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Two Button Problem – Frontend Masters Blog","url":"https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl"},"datePublished":"2025-10-21T23:18:27.970Z","dateModified":"2025-10-21T23:18:50.623Z","description":"Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/74d04ce87ad4b918cdda2f1216b4e741?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/74d04ce87ad4b918cdda2f1216b4e741?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":6,"discussionUrl":"https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":122},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"keywords":"webdev,css,ux,ui-design,accessibility","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"The Two Button Problem – Frontend Masters Blog"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl","comment":[{"@type":"Comment","text":"This is why I simply hate smart TVs. I never know which button’s in focus.","datePublished":"2025-10-31T04:22:04.084Z","url":"https://daily.dev/posts/56I2s1WTL#c-cqy70VGCH","author":{"@type":"Person","name":"Jolene Kearse","url":"https://daily.dev/jolenek","image":"https://media.daily.dev/image/upload/s--hzXedQCA--/f_auto/v1721913049/avatars/avatar_uquWdygd7S7azFvRNHB8n"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"I would pretty much 100% of the time expect and will assume that, in that example image, the “try it free” is the one selected because its filled with the app theme color. However I wouldn’t be surprised if I was wrong, because there have been apps which have reversed my expectations before.","datePublished":"2025-11-04T12:43:13.905Z","dateModified":"2025-11-04T12:44:21.724Z","url":"https://daily.dev/posts/56I2s1WTL#c-711ymi9a8","author":{"@type":"Person","name":"LasseP","url":"https://daily.dev/lassep","image":"https://avatars.githubusercontent.com/u/91098880?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is so interesting. I’ve never thought of this. But yes, in a universe where information seems inherently binary, when two buttons represent a choice, two styles can’t be the distinguisher!\nI really like the solutions here. Very well, articulated.","datePublished":"2025-11-14T02:19:00.804Z","url":"https://daily.dev/posts/56I2s1WTL#c-P9XkPlzdu","author":{"@type":"Person","name":"Jaren Whitehouse","url":"https://daily.dev/jarenwhitehouse","image":"https://lh3.googleusercontent.com/a/ACg8ocLY2LzRCN_K4TyldRJbRgEgdc5IKy9WFrbHZLBDqu2mH3NvFTb9=s96-c"}},{"@type":"Comment","text":"I’ve seen sites where this kind of thing is a false dichotomy. Either button takes you to the same login screen. If it finds a matching account, it logs you in. If it doesn’t, it creates one with the info you provided and starts your trial.","datePublished":"2025-11-10T17:47:14.938Z","url":"https://daily.dev/posts/56I2s1WTL#c-vEIw7P9qe","author":{"@type":"Person","name":"David Cram","url":"https://daily.dev/sqlmancer","image":"https://lh3.googleusercontent.com/a/AGNmyxYA76uDRQagdzZtTrLKWf6AaIDhJCjl8DMKfyvN=s96-c"}},{"@type":"Comment","text":"One of my personal bugbears, specially when it toggles between the two they both could kind of be toggled. Say for a yellow and a green button.","datePublished":"2025-11-12T14:31:09.358Z","url":"https://daily.dev/posts/56I2s1WTL#c-wnttgMPyp","author":{"@type":"Person","name":"neil hatly","url":"https://daily.dev/neilhatly","image":"https://media.daily.dev/image/upload/s--NQzs28XS--/f_auto/v1734692205/avatars/avatar_NM0uvu3dPLeLBaVyW0bIO"}}]} ```