Backdrop replacement v1

css/main.css

@@ -1,3 +1,8 @@
+:root {
+    --btn-dark: #1C1C1C;
+    --btn-light: #E3E3E3;
+}
+
 @font-face {
     font-family: 'Lato';
     src: url('fonts/Lato-Regular.ttf');
@@ -50,31 +55,11 @@ main {
 
     border: none;
     background: none;
-    color: #000;
+    color: var(--btn-dark);
     font: unset;
 
     border-radius: 100vw;
 }
-.btn.cbtn::after {
-    content: "";
-    position: absolute;
-    z-index: 1000;
-
-    padding: 0rem;
-
-    width: 0;
-    height: 0;
-
-    border-radius: 100vw;
-
-    backdrop-filter: invert(1);
-    transition: padding .2s;
-}
-/* When deployed on a platform, choose one or the other, not both */
-.btn.cbtn:focus::after, /* TV */
-.btn.cbtn:hover::after  /* PC */ {
-    padding: inherit;
-}
 
 @keyframes cbtn-click {
     from {
@@ -112,3 +97,28 @@ main {
 .btn.sbtn::after {
     
 }
+
+.shadow {
+    display: inherit;
+    place-content: center;
+    place-items: center;
+    position: absolute;
+
+    filter: invert(1);
+    background: var(--btn-light);;
+    overflow: hidden;
+
+    padding: 0rem;
+
+    width: 0;
+    height: 0;
+
+    border-radius: 100vw;
+
+    transition: padding .2s;
+}
+/* When deployed on a platform, choose one or the other, not both */
+.btn.cbtn:focus > .shadow, /* TV */
+.btn.cbtn:hover > .shadow  /* PC */ {
+    padding: inherit;
+}

js/button.js

@@ -2,11 +2,11 @@ addEventListener("load", () => {
     const onAnimationFinished = (e) => {
         e.target.remove();
     };
-    const onClick = (e) => {
+    const onClick = (e, btn) => {
         const clickElement = document.createElement("div");
         clickElement.className = "click";
         clickElement.addEventListener("animationend", onAnimationFinished);
-        e.target.appendChild(clickElement);
+        btn.appendChild(clickElement);
     };
     for (const btn of document.getElementsByClassName("btn")) {
         btn.addEventListener("focusin", () => {
@@ -15,6 +15,12 @@ addEventListener("load", () => {
         btn.addEventListener("focusout", () => {
             console.log("OUT");
         });
-        btn.addEventListener("click", onClick);
+        btn.addEventListener("click", (e) => onClick(e, btn) );
+
+        // Add backdrop-filter replacement
+        const bdfr = document.createElement("div");
+        bdfr.className = "shadow";
+        bdfr.innerHTML = btn.innerHTML;
+        btn.appendChild(bdfr);
     };
 });