Why doesn't my button's background-color change on focus when it's already styled for hover?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

Why doesn't my button's background-color change on focus when it's already styled for hover?

Asked on Jan 13, 2026

Answer

When a button's background color changes on hover but not on focus, it may be due to the specificity or order of CSS rules. Ensuring that the focus style is correctly defined and prioritized can resolve this issue.

<!-- BEGIN COPY / PASTE -->
    <style>
      button {
        background-color: lightgray;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: blue;
      }

      button:focus {
        background-color: green;
        outline: none; /* Removes default focus outline */
      }
    </style>

    <button>Click Me</button>
    <!-- END COPY / PASTE -->

Additional Comment:

Ensure that the :focus selector is defined after the :hover selector to maintain proper specificity and order.
Use the outline property to remove or customize the default focus outline if needed.
Consider accessibility by ensuring focus styles are visible for keyboard navigation.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

Why doesn't my button's background-color change on focus when it's already styled for hover?

Asked on Jan 13, 2026

Answer

5,000+ Real Questions. Clear Answers.