Tweak design of button component on mobile (and maybe desktop, too)

[mia-allers-gds]

Currently our button components default to full width on smaller (mobile) screens. Because of this, its possible that the buttons are not as noticeable by users — many people have mentioned that they look like banners, not buttons, and this makes them easy to skip over.

Additionally, the top and bottom padding on the full width buttons is quite small which makes the text more difficult to read.

Context

To solve the above issues and to generally improve the look of the buttons, we could:

• Make them responsive the width of the text, not the screen
• Improve the padding to make locating the text easier

Alternatives

N/A

Additional information (if applicable)

It would be great to do this around the time of the rebrand rollout, and ahead of the app release. Apps have chunkier buttons than our component and it would be beneficial for users if we brought them closer together

[mia-allers-gds]

@kellylee-gds This is my stab at creating a back log item for button widths. Let me know if it looks ok!