Added btn primary and changed colors

src/assets/scss/_global.scss

@@ -74,16 +74,56 @@ hr {
   display: inline-block;
   padding: 13px 33px;
   vertical-align: middle;
+  font-size: 13px;
   line-height: 1;
   white-space: nowrap;
   text-decoration: none;
+  background: none;
+  border: none;
   border-radius: 30px;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  & ~ & {
+    margin-left: 10px;
+  }
 
   &-primary {
     color: $white;
-    background: $primary;
+    background-color: $primary;
+    transition: background-color .3s ease-out;
     &:hover {
+      background-color: $primary-light;
+    }
+    &:focus, &.active {
+      background-color: $primary-light;
+      transition: box-shadow .2s ease-in-out;
+      box-shadow: 0 0 10px rgba($white, 50%);
+    }
+  }
 
+  &-icon {
+    position: relative;
+    padding-right: 53px;
+    .fs-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      width: 20px;
+      height: 20px;
     }
   }
 }
+
+.fs-icon {
+  width: 50px;
+  height: 50px;
+  &.icon-sm {
+    width: 20px;
+    height: 20px;
+  }
+}

src/assets/scss/_variables.scss

@@ -3,9 +3,13 @@ $white: #fff;
 $black: #000;
 $fs-black: #070712;
 
-$starry-purple: #0e103d;
+$space-blue-700:  #1d3557;
+$space-blue-600:  #234e69;
+$space-blue-500:  #457b9d;
+$space-blue-300:  #a8dadc;
 
-$primary: $starry-purple;
+$primary: $space-blue-700;
+$primary-light: $space-blue-600;
 
 $heading-font-family: 'Poppins', serif;
 $body-font-family: 'Open Sans', sans-serif;