Button element 'font-family' diverges from a[role=button] or a[class=button] on Chrome

[GuilhermeRossato]

There's a bug when switching from a <a> element to a <button> element caused by the button element not having font-family defined (defaults to Arial in my browser).

Browser: Google Chrome v76.0.3809.100
OS: Windows 10 OS Version 1803

To reproduce you just have to compare css of an element of type:

<a class="button primary">Submit</a>

With the same as a button:

<button class="button primary" type="submit">Register</button>

The element's css has a 'user agent stylesheet' that defines its font as the following:

font: 400 13.3333px Arial;

The element's css has its font defined at body normally, this is where the divergence comes from.

This can be even observed at this demo's link.

Proposed fix (also including font-size and letter-spacing, which is also necessary)

.button {
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    font-family: var(--font-family);
    font-size: var(--font-size);
    letter-spacing: .01em;
}

Disclaimer: I have not checked other browsers's behaviour.

[jenil]

🤔
Can you send me a video of this? I can't reproduce this on a Macbook so might be worth seeing this in action.

[yne]

Confirmed from Chromium on Linux:

Chromium does not forward body css properties to the <button> , so the 3 following rules are missing on any <button>.

letter-spacing: 0.01em;
font-weight: 400;
font-family: var(--font-family);

I would rather suggest to use unset or inherit (like normalize) so we could would avoid duplicating rules from the body.

Alternate solution:

Just include normalize.css ;)

<link rel="stylesheet" href="http://unpkg.com/normalize.css">

[jenil]

I see, can someone make a tested PR for this?

[yne]

I'm on it

[jenil]

Ships in v0.7.0

[boazblake]

not sure if this is related to the bug I am seeing in safari, but if you check the chota.css homepage and hover over the links that have button classes, the hover animation is broken.