Overflow click animation

css/main.css

@@ -21,6 +21,8 @@ body {
     grid-template-rows: 1fr;
     width: 100vw;
     height: 100vh;
+
+    overflow: hidden;
 }
 
 main {
@@ -34,9 +36,6 @@ main {
     place-items: center;
 }
 
-.btn {
-    
-}
 .btn:focus {
     outline: none;
 }
@@ -48,7 +47,6 @@ main {
     position: relative;
     
     padding: 2.2rem;
-    margin: -.4rem;
 
     width: 0;
     height: 0;
@@ -60,21 +58,44 @@ main {
 
     border-radius: 100vw;
 }
+.btn.cbtn {
+    --padding: 5vmin;
+    padding: var(--padding);
+    font-size: 3vmin;
+}
+
+.btn.cbtn.medium {
+    --padding: 5vmin;
+    padding: var(--padding);
+    font-size: 3vmin;
+}
+
+.btn.cbtn.big {
+    --padding: 30vmin;
+    padding: var(--padding);
+    font-size: 20vmin;
+}
+
+.btn.cbtn.overlap {
+    margin: -1vmin;
+}
 .btn.cbtn > i {
     display: grid;
-
+    place-items: center;
-    padding: inherit;
 }
 .btn.cbtn > i::after {
     display: grid;
     place-content: center;
     position: absolute;
 
+    z-index: 1000;
+
     overflow: hidden;
 
     padding: 0rem;
 
-    background: #fff;
+    background: var(--btn-light);
+    color: var(--btn-dark);
     filter: invert(1);
 
     width: 0;
@@ -86,7 +107,7 @@ main {
 /* When deployed on a platform, choose one or the other, not both */
 .btn.cbtn:focus > i::after, /* TV */
 .btn.cbtn:hover > i::after  /* PC */ {
-    padding: inherit;
+    padding: var(--padding);
 }
 
 @keyframes cbtn-click {
@@ -95,7 +116,7 @@ main {
         opacity: 1;
     }
     to {
-        padding: inherit;
+        padding: calc(var(--padding) * 1.3);
         opacity: 0;
     }
 }
@@ -122,6 +143,7 @@ main {
     text-decoration: none;
     font-family: Lato;
 }
+
 .btn.sbtn::after {
     
 }