26

We all know that :hover is required if you want to create sophisticated user experience. It allows users to recognize a click option on an element.

I wonder what value does :focus add for buttons? Users get feedback that they really did press the button. But all of my projects usually show other indicators which indicate that the action is preforming, such as "loading", "sending" …

Is :focus for buttons really required since it usually only is visible for a split second?

  • 2
    If you're talking about CSS, you are confusing it with :active. :active is visible for a split second (it's the "pressed" style) while :focus simply states the currently selected element, it shouldn't appear only for a split second, but for as long as it's selected (or, more appropriately speaking, has user focus) – bfred.it Dec 31 '14 at 18:15
54

Not everyone uses a mouse.

Focus is vital for users who need to press Tab to move between interactive elements on your form/page. Creating a :focus style for your buttons (ideally similar to :focus on other elements) allows those users to see that they are no longer typing in a text input and that the submit button is active if they press Return.

Even users with mice can benefit from being able to Tab between input fields and press enter to submit the form. Often, people who work in data entry develop patterns like type-Tab-type-Tab-Enter for forms that get filled in hundreds of times per day. Having a useful :focus style allows them to see that they are hitting Enter at the right time.

  • 6
    I frequently make my :focus the same as my :hover. (Or very close to it.) This helps save me from forgetting about keyboard users. In the rare instances where matching my :focus and :hover styles doesn't make sense I can go back and tweak them. – John S Dec 29 '14 at 20:59
  • 1
    +1 Accessibility is a vital part of the User Experience! – Howdy_McGee Dec 29 '14 at 21:51
4

Focus is used for form elements. It shows that you've clicked into the text entry box (for example) and it will stay onFocus for as long as that element is selected.

EDIT: For submit buttons your "highlight" or whatever you do for showing :focus will be there for as long as you are holding down the mouse button. The use cases for this are more limited.

EDIT 2: (couldn't put code in comment)

You can use :focus on buttons.

<style>
  input:focus {
  background-color: #FFCC00;  // yellow
</style>


<input type="text">
<input type="text">
<input type="submit">

I use it for the same reason stated in the answer by Nathan Rabe. We have a lot of people at work who are used to old style DOS tab and enter interface and bring their habits over to new interface.

  • 2
    Oh sorry I should clarify that I am thinking of :focus on buttons. – ewooycom Dec 29 '14 at 16:34
  • Form inputs, buttons, links; they are all elements that can be selected using the Tab key, or caret browsing. – sleblanc Dec 30 '14 at 6:24
  • Your button example is confusing :focus with :active – DA01 Dec 31 '14 at 15:35
  • @DA01 - you can use :focus for buttons. I use it all the time. See the example in the edit above. – Mayo Dec 31 '14 at 20:23
  • 1
    @Mayo yes, buttons certainly have a :focus state, but there's still a bit of confusion. The state of a button while your mouse button is pressed is the :active state--not :focus state. :focus on a button remains until you :blur (or lose focus). It doesn't pertain to the length of your button press. – DA01 Dec 31 '14 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.