adding glossy button CSS

src/resources/css/elements/glossy-buttons.css

@@ -0,0 +1,106 @@
+.container {
+    display: grid;
+    gap: 4em 1em;
+}
+
+.primary-button {
+    --h: 196;
+    --s: 100%;
+    --l: 41%;
+}
+.secondary-button {
+    --h: 28;
+    --s: 100%;
+    --l: 41%;
+}
+
+.glass-button {
+    font-size: clamp(1.2rem, 5vw + 1rem, 2.5rem);
+    width: 10em;
+    height: 4em;
+    border-radius: 0.5em;
+    background-image: linear-gradient(#0003,#0000);
+    box-shadow:
+          0 -0.125em 0.25em #0002,
+          0 0.25em 0.25em hsl(var(--h) var(--s) var(--l) / 0.5),
+          0 0 0 0.1em hsl(var(--h) var(--s) var(--l) / 0.5),
+          0 0.175em 0.3em hsl(var(--h) var(--s) var(--l) / 0.5) inset,
+          0 -0.025em 0.175em hsl(var(--h) var(--s) var(--l) / 0.4) inset,
+          0 -0.25em 1em 0.3em hsl(var(--h) var(--s) var(--l) / 0.3) inset,
+          0 0.6em 0 hsl(var(--h) var(--s) var(--l) / 0.3) inset,
+          0 2em 1em #0004;
+    backdrop-filter: blur(0.15em);
+    position: relative;
+    display: grid;
+    place-content: center;
+    color: hsl(var(--h) var(--s) var(--l) / .7);
+    text-shadow: 
+      0.03em 0.03em #fff5,
+      -0.03em -0.03em #0005;
+    cursor: pointer;
+    transition: 0.1s ease;
+    padding-top: 0.2em;
+    border: none;
+    background: transparent;
+}
+
+.glass-button:before {
+    content: '';
+    height: 1.5em;
+    left: 10%;
+    top: 100%;
+    position: absolute;
+    width: 80%;
+}
+
+.glass-button:after {
+    content: '';
+    inset: 0;
+    top: 0.5em;
+    position: absolute;
+    background-image: 
+      linear-gradient(
+        105deg,
+        transparent 20%,
+        hsl(var(--h) var(--s) var(--l) / .2) 20%,
+        hsl(var(--h) var(--s) var(--l) / .2) 30%,
+        transparent 30%,
+        transparent 32%,
+        hsl(var(--h) var(--s) var(--l) / .2) 5%,
+        hsl(var(--h) var(--s) var(--l) / .2) 40%,
+        transparent 0%
+      );
+    background-size: 400% 100%;
+    background-position: 100% 0%;
+    transition: .3s ease;
+}
+
+.glass-button:active:after {
+    background-position: -50% 0%;
+}
+
+.glass-button:active {
+    backdrop-filter: blur(0.08em);
+    box-shadow:
+      0 -0.125em 0.25em #0002,
+      0 0.25em 0.25em hsl(var(--h) var(--s) var(--l) / 0.5),
+      0 0 0 0.1em hsl(var(--h) var(--s) var(--l) / 0.5),
+      0 0.175em 0.3em hsl(var(--h) var(--s) var(--l) / 0.8) inset,
+      0 -0.025em 0.175em hsl(var(--h) var(--s) var(--l) / 0.4) inset,
+      0 -0.25em 1em 0.3em hsl(var(--h) var(--s) var(--l) / 0.3) inset,
+      0 0.6em 0 hsl(var(--h) var(--s) var(--l) / 0.3) inset,
+      0 1em 0.5em #0004;
+    translate: .01em .25em;
+}
+
+.glass-button:active:before {
+    height: 1em;
+}
+
+/*body {
+    background-color: #3d3d3d;
+    display: grid;
+    margin: 0;
+    min-height: 100vh;
+    place-content: center;
+}*/