Style for the ghost button has been changed

scss/_btn.scss

@@ -75,3 +75,31 @@ $btn-colors: (
   }
   @content;
 }
+
+@mixin ghost-button($has-icon: false) {
+  @include button($has-icon: $has-icon);
+
+  position: relative;
+  font-size: 1.2em;
+  border: unset;
+
+  &:hover {
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $dark-gray;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
+}

src/components/GhostButton.vue

@@ -19,42 +19,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$btn-gray-color: #4f4f4f;
+@import "scss/btn";
 
 .btn {
-  display: flex;
+  @include ghost-button();
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  background-color: transparent;
-  color: $btn-gray-color;
-  font-size: 1.2em;
-  border: unset;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    &::after {
-      width: 98%;
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 auto;
-    width: 30%;
-    height: 2px;
-    background-color: $btn-gray-color;
-    transform: translateY(2px);
-    transition: width .3s linear;
-  }
 }
 </style>