Reader: ensure button block matches main site styles

[tophertoy]

Changes proposed in this Pull Request

This change handles styling the button block in reader to match the website It is only part 1 of 8 of this issue:

#43595

Testing instructions

Before:

Taken from: http://calypso.localhost:3000/read/blogs/159889361/posts/1363

Firefox After:

[tophertoy]

@leandroalonso Here's what I have so far.

Do you have thoughts on what styling you want brought over?

I'm told reader is opinionated on colours, so I haven't brought those over.

[leandroalonso]

Hi @tophertoy! Thanks for your contribution!

@bluefuton would you mind reviewing this one?

[bluefuton]

Thanks for the contribution @tophertoy! Can we match the styles applied to the default Calypso button?

https://wordpress.com/devdocs/packages/components/src/button/README.md?term=button

I think the 'non-primary' version would make the most sense. It looks like this:

[tophertoy]

@bluefuton that link appears not to be working for me. Also https://wordpress.com/devdocs/ is 404ing.

Do you want me to work from the attached "Bananas" image?

[bluefuton]

Sorry @tophertoy - try on wpcalypso:

https://wpcalypso.wordpress.com/devdocs/packages/components/src/button/README.md?term=button

[tophertoy]

@bluefuton ok I've made some changes. Attached screenshots from firefox and chrome at the top.

Let me know what you think or if there is a defined browser list I should check.

[bluefuton]

Looks good so far - just a couple of tweaks to bring it in line with the Button component.

[tophertoy]

@bluefuton I've made those changes.

[bluefuton]

Just one last tweak needed I think - let's add a touch of right and bottom margin to prevent multiple buttons running into each other:

[tophertoy]

Gap is showing as 8px between buttons on right and below now:

Thoughts?

[bluefuton]

Looks good! 🚢