bug(button): overriding not working as expected.

[AnkitaSood]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

To override the background color for a button to a particular hex value provided, the state layer needs to be given an opacity of value 1. However, in doing so, the outline is no longer clearly visible. It appears to get hidden behind the state layer/ ::before pseudo element created.

Reproduction

StackBlitz link: https://stackblitz.com/edit/wwtmsk43?file=src%2Fexample%2Fbutton-overview-example.css

Hover over the outline button to notice the outline no longer being visible.

Expected Behavior

When opacity for the state layer is set to 1, the state layer for an outlined button should not hide the outline for the button. The outline should still be visible.

Actual Behavior

The background's stacking context is higher than the button's stacking context which is hiding the border/ outline.

Environment

• Angular: 20
• CDK/Material: 20

[andrewseguin]

The root issue here is that the state layer needs to exactly match the size of the button in order for it to have correct border-radius curves. Here's the issue it was attempting to fix: #13738

The alternative is to use an overflow hidden style and not worry about matching the size, but I'd expect this to be a breaking change unfortunately. For now it seems we're stuck between the issues. To workaround, you could manually add overflow: hidden and that should show the outlines in either case