Button style

Adjust Music component JS
aurgh

src/styles/_button.scss

@@ -0,0 +1,52 @@
+.button {
+    padding: 0 32px;
+
+    width: max-content;
+    height: 35px;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    text-decoration: none;
+
+    border-radius: 9999px;
+    border: 0 solid $gray;
+    background-color: rgba($light, 0.05);
+    color: $light;
+
+    overflow: hidden;
+
+    &:before {
+        content: '';
+
+        width: 100%;
+        height: 100%;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        border-radius: 9999px;
+        background-color: rgba($light, 0.05);
+
+        transform: scale(0);
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &:hover, &:focus-visible {
+        outline: 0 solid transparent;
+
+        &:before {
+            transform: scale(1);
+            opacity: 1;
+
+            transition: opacity 0.3s cubic-bezier(0,1,0,1), transform 0.5s cubic-bezier(0,1,0,1);
+        }
+    }
+}

src/styles/_main.scss

@@ -9,6 +9,8 @@ main {
 
     border-top-left-radius: $radius;
     border-top-right-radius: $radius;
+    border: 2px solid $gray;
+    border-bottom: 0 solid transparent;
     background-color: $dark;
 
     box-shadow: 0 8px 8px rgba(#000, 0.3);

src/styles/styles.scss

@@ -1,5 +1,6 @@
 @import "vars";
 @import "reset";
 
+@import "button";
 @import "pill";
 @import "main";

src/styles/vars.scss

@@ -2,5 +2,6 @@ $dark: #312620;
 $gray: #382e28;
 $light: #f0e7e4;
 $orange: #f2672c;
+$green: #1f2d23;
 
 $radius: 4px;