Add new focus style to buttons

[aliuk2012]

Before:

After:

Browser testing:

• Chrome 73 & 74
• Firefox 65 & 66
• OS Safari 10, 11, 12
• Android Samsung Galaxy (Chrome)
• iOS XS / 8 (Safari)
• Edge 17 & 18
• IE 8 - 11

Others tests:

• Zoomed at 400%
• Legacy mode - focus is darker colour. If a button doesn't use govuk-button class then the focus style is not updated to the new style. For example https://govuk-frontend-review-pr-1315.herokuapp.com/full-page-examples/renew-driving-licence

Issues:

• Start button icon is still a two toned white png.

👉 Before: https://govuk-frontend-review.herokuapp.com/components/button
👉 After: https://govuk-frontend-review-pr-1315.herokuapp.com/components/button
Closes #1305

[NickColley]

Looking good so far, added some comments to make it more consistent with the rest of the codebase. 👍

[dashouse]

Looking good so far

The secondary :focus state that is applied at the same time as :active is causing the button to get smaller. I believe I may have added some padding on the prototype, ideally the button will remain the same size in every state.

It also appears to have lost the margin-top that is applied in this state to give the button it's "pushed down" feel

[36degrees]

I don't think this is working correctly for secondary or warning buttons at the minute. They're not getting the yellow highlight, and in the case of the warning buttons the text colour is changing to black (on red)

[aliuk2012]

@36degrees Ah yes I see that, I think thats because I removed the important and that was forcing everything to work. I'll take a look at it as @NickColley suggested perhaps moving the focus/hover state to the bottom

[NickColley]

It looks like we can make the highlight border thicker to be consistent with Dave's original design:

Original:

[NickColley]

The original avoids the focus state when hovered, and active, which is not consistent in this version.

[NickColley]

Buttons with modifiers have inconsistent focus state compared with the original.

Let me know if you wanna go over any of this feedback together.

[aliuk2012]

It was decided that the final version of the buttons would not have a double thick border like links and the most noticeable changes would be the background colour changing to yellow and the bottom border colour changing to black

[NickColley]

In Dave's original design, the focus style is not shown when the user is actively (:active) pressing the button, or hovering over the button (:hover).

In this iteration, active works but hover still shows the focus. You could consider something like :not(:active):not(:focus) maybe.

Additional to this, the secondary and warning buttons show the focus state when actively pressing the buttons.

Resolved