27

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?

Improve this question
1
  • 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)
    – fregante
    Dec 31, 2014 at 18:15

2 Answers 2

Reset to default
55

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.

Improve this answer
2
  • 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, 2014 at 20:59
  • 1
    +1 Accessibility is a vital part of the User Experience!
    – Howdy_McGee
    Dec 29, 2014 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.

Improve this answer
5
  • 2
    Oh sorry I should clarify that I am thinking of :focus on buttons.
    – ewooycom
    Dec 29, 2014 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, 2014 at 6:24
  • Your button example is confusing :focus with :active
    – DA01
    Dec 31, 2014 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, 2014 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, 2014 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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