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 {
@@ -111,4 +96,29 @@ 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;
 }