{"id":7422,"date":"2025-10-21T18:16:01","date_gmt":"2025-10-21T23:16:01","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7422"},"modified":"2025-10-21T18:16:02","modified_gmt":"2025-10-21T23:16:02","slug":"the-two-button-problem","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-two-button-problem\/","title":{"rendered":"The Two Button Problem"},"content":{"rendered":"\n

I see this UI\/UX issue all the time: there are two buttons, and it’s not clear which one of them is in the active state. Here’s an example from my TV:<\/p>\n\n\n\n

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

Which one of those two buttons above is active? Like if I press the enter\/select button on my remote, am I selecting “Try it free” or “Sign in”? It’s entirely unclear to me based on the design. Those two design styles are ambiguous. Just two random selections from today’s trends of button design.<\/p>\n\n\n\n

If I press the up (or down) arrows on my remote, the styles of the buttons just reverses, so even interacting with the interface doesn’t inform the choice.<\/p>\n\n\n\n

This is a problem that can be solved at multiple levels. If the buttons are toggles that affect on-page content, the accessibility angle is partially solved by the aria-selected<\/code> attribute<\/a>, for example. It’s also slightly less of an issue on devices with a cursor, as you likely just click on the one that you want. This is mostly a problem with remote control and keyboard usage where the active<\/code> state is unclear or ambiguous. <\/p>\n\n\n\n

I call it the “two button” problem because if there were more than two buttons, the one that is styled differently is probably the one that is active. We could use our grade school brains to figure out which button is active.<\/p>\n\n\n

\n
\"\"
(via<\/a>)<\/figcaption><\/figure>\n<\/div>\n\n\n

Ideally, though, we don’t have to think very hard. It should be obvious which one is active. <\/p>\n\n\n\n

Again, the problem:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The most obvious solution here is to make both button styles the same, but be additive when one of them is the active button.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

I feel like it’s very clear now that “Try it free” is the selected button now. Even if it’s not to a user immediately. If they tab\/arrow\/whatever to the other<\/em> button, that outline design will move to it and it will become clear then.<\/p>\n\n\n\n

You could also, ya know, literally point to it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Perhaps you could resort to more “extreme” design styles like this when there is prove-ably no mouse\/cursor involved, like:<\/p>\n\n\n

@media<\/span> (hover:<\/span> none) and<\/span> (pointer:<\/span> coarse) {\n  button<\/span>:active<\/span> {\n    \/* big obvious arrow styles *\/<\/span>\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This “two button” problem also can come up in the design pattern of “toggles”. Take something like this:<\/p>\n\n\n
\n
\"\"
A “pill” toggle design pattern.<\/figcaption><\/figure>\n<\/div>\n\n\n
Which one of those buttons is currently active? The up arrow? The down arrow? Neither? It’s impossible to tell by look alone.<\/p>\n\n\n\n
Sometimes in this case the “active” button is “grayed out”:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
The implication here is that the up arrow is the “active” one, so you don’t need to press it again as it won’t do anything. Only the non-active button is pressable. I feel like this is okay-ish as a pattern, but it’s not my favorite as the active state is less prominent instead of more prominent almost indicating it’s disabled for some other reason or doesn’t matter.<\/p>\n\n\n\n
This kind of thing makes me almost miss the days of skeuomorphism where digital interfaces were designed to try to mimic real world surfaces and objects. We don’t have to go full leather-coated buttons though, we can just make the active button appear pressed through shadows and flattening.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
This situation differs from the TV interface issue above in that this “active” button is indicating the button has already<\/em> been pressed, not that it’s the button that will be<\/em> pressed. So you’d need a style for that state as well.<\/p>\n\n\n\n
Maybe these aren’t the most amazing examples in the world, but I hope I’ve got you thinking about the two-button problem. When there are only two buttons, you can’t just pick two arbitrary different styles, as that doesn’t help people understand which of the two are active. You need to think about it a little deeper and get those styles in a place where it’s obvious.<\/p>\n","protected":false},"excerpt":{"rendered":"
When you’ve got two buttons with two different looks (and no cursor), how do you know which one you’re about to activate? You’ll need to be careful with the design.<\/p>\n","protected":false},"author":1,"featured_media":7490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[408,93,7,24],"class_list":["post-7422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-media","tag-buttons","tag-css","tag-design"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/two-button-problem.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7422"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7422\/revisions"}],"predecessor-version":[{"id":7491,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7422\/revisions\/7491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7490"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
We’ve got a recent post on @media queries<\/a> that goes into lots of situations like this!<\/p>\n\n\n\n