Quick summary

When adding a form block to Alves, the Submit button looks OK in the editor, but not OK when previewing or publishing the page.

Steps to reproduce

1. Add new page
2. Select one of the "Contact" layouts that includes a contact form (OR use a blank layout and choose the Form block from the editor, then Contact Form)
3. Look at the button in the editor, and compare to the button on the front end

What you expected to happen

Button should look like this on the front end:

Screenshot taken in the editor.

What actually happened

Button looks like this:

• Too much padding
• Font not bold

Depending which Contact layout is selected, the button is also sometimes missing a hover state.

Context

Discovered while building a customer's site for a WordPress.com project, where the effect was actually even worse before I wrote some custom CSS to overcome it.

Before custom CSS:

After custom CSS:

The button looks normal on the Alves theme demo's Contact page:

Pbe1g7-x-p2

Operating System

No response

Browser

No response

Simple, Atomic or both?

No response

Theme-specific issue?

Alves

Other notes

No response

Reproducibility

No response

Severity

No response

Available workarounds?

Yes, easy to implement

Workaround details

Workaround requires custom CSS.