test

test/assets/css/_buttons.scss

@@ -0,0 +1,69 @@
+.button {
+  padding: 1rem 2.5rem 1rem 2.5rem;
+  min-width: 13.75rem;
+  border: 0;
+  border-radius: $global-radius;
+  color: $primary-900;
+  font-family: $font-primary;
+  font-size: 0.875rem;
+  font-weight: $weight-bold;
+  line-height: 1.5rem;
+  text-align: center;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  @media (min-width: 48rem) {
+    min-width: auto;
+  }
+}
+
+.button--primary {
+  background-color: $conversion-400;
+
+  &:hover {
+    padding-bottom: 0.875rem;
+    background-color: $conversion-500;
+    border-bottom: 0.125rem solid $conversion-600;
+  }
+}
+
+.button--secondary {
+  color: $conversion-500;
+  background-color: $white;
+  border: 0.0625rem solid $primary-100;
+  font-size: 0.875rem;
+  box-shadow: 0 0.1875rem 0.9375rem 0 #00065B1A;
+
+  &:hover {
+    color: $primary-900;
+    background-color: $primary-100;
+  }
+
+  &:active, &.is-active {
+    color: $white;
+    background-color: $primary-500;
+    border-color: $primary-500;
+  }
+
+  &:hover, &:active, &.is-active{
+    box-shadow: 0 0.3125rem 0.9375rem 0 #00065B4D;
+  }
+}
+
+.button--menu {
+  min-width: auto;
+  padding: 1rem;
+  background-color: $white;
+
+  div {
+    width: 2rem;
+    height: 0.1875rem;
+    margin-block: 0.25rem;
+    background-color: $primary-900;
+    border-radius: $global-radius;
+  }
+
+  &:active {
+    background-color: $primary-100;
+  }
+}