first load

styles/_buttons.scss

@@ -0,0 +1,97 @@
+/***** Buttons *****/
+.button {
+  @include tablet { width: auto; }
+
+  background-color: transparent;
+  border: 1px solid $button-color;
+  border-radius: 4px;
+  color: $button-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 2.34; //Taken from Zendesk garden bedrock
+  margin: 0;
+  padding: 0 20px;
+  text-align: center;
+  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+  -webkit-touch-callout: none;
+
+  &:visited {
+    color: $button-color;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.button-primary {
+    background-color: $brand_color;
+    color: $brand_text_color;
+    text-decoration: none;
+  }
+
+  &.button-primary {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $hover-button-color;
+      border-color: $hover-button-color;
+    }
+  }
+
+  &[data-disabled] {
+    cursor: default;
+  }
+}
+
+.button-large, .hbs-form input[type="submit"] {
+  @include tablet {
+    width: auto;
+  }
+
+  cursor: pointer;
+  background-color: $button-color;
+  border: 0;
+  border-radius: 4px;
+  color: $brand_text_color;
+  font-size: 14px;
+  line-height: 2.72;
+  min-width: 190px;
+  padding: 0 1.9286em;
+  width: 100%;
+
+  &:visited {
+    color: $brand_text_color;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $hover-button-color;
+  }
+
+
+  &[disabled] {
+    background-color: #ddd;
+  }
+}
+
+.button-secondary {
+  color: $secondary-text-color;
+  border: 1px solid $high-contrast-border-color;
+  background-color: transparent;
+
+  &:visited {
+    color: $secondary-text-color;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $text_color;
+    border: 1px solid $high-contrast-border-color;
+    background-color: $primary-shade;
+  }
+}