I think I'm running into the same issue, Windows 11 Firefox 109.0.1. The "ridge" of the reflection effect is stuck to the lower ~10% of the button, and completely dark, and the gold looks distinctly green.
Left is firefox, right is Edge (appearing, I presume, as intended)
I've been obsessing over creating a high-end and unique metallic look that I feel has been sorely missing from the web. I've put quite a bit of effort into ensuring the implementation is lightweight, performant and cross-browser compatible.
Maybe Metalmorphism can bring a touch of metallic elegance to the web in 2023?
The library I've written to powers all this, called MetalliCSS, lets you turn any HTML element into a metallic looking thing by giving it a certain classname. It generates the SVG code (filters and all) on the fly and renders the raster image to a canvas element that is placed inside the element. The library will respect the dimensions, as well as the background and border-radius properties of the element, using them all as parameters for the effect (even after the first render, if anything changes, dynamically).
I love metallic stuff. I think the aesthetic is timeless and compelling. Seeing something metallic in the world always gives me pause. I remember as a child being fascinated with metallic toys and such, even the cheap plastic stuff with a faux metal coat. When I got into web development, the skeuomorphic design trend was on the rise, and I remember it fondly. I feel like I am on a personal crusade to bring back some of the charm of this bygone era.
Please let me answer any questions you may have about the implementation.
On Firefox with Dark Reader Theme Generation set to Dynamic, the initial page is just a black slate. (The default setting, Filter, inverts the background making it look awful.) I have to scroll down to see anything.
I know that it's my own browser configuration changing your website, but I expect you'll find many users here use Dark Reader. I'm also not sure what you can do about it, but I know that I am personally more amenable to turning it off on websites that provide a dark mode, especially if the CSS automatically respects the color scheme of my device (which is dark).
