1 files changed, 70 insertions, 14 deletions
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8df8829f2..04e1ed96e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,6 +2,76 @@
   Buttons
  */
 
+.btn-primary,
+.btn-primary--lg,
+.btn-secondary,
+.btn-secondary--lg {
+  background: $white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: border-color .3s ease;
+  padding: 0 20px;
+  min-width: 140px;
+  text-transform: uppercase;
+}
+
+.btn-primary,
+.btn-primary--lg {
+  color: $curious-blue;
+  border: 2px solid $spindle;
+
+  &:active {
+    background: $zumthor;
+    border-color: $curious-blue;
+  }
+
+  &:hover {
+    border-color: $curious-blue;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-secondary,
+.btn-secondary--lg {
+  color: $scorpion;
+  border: 2px solid $dusty-gray;
+
+  &:active {
+    background: $gallery;
+    border-color: $dusty-gray;
+  }
+
+  &:hover {
+    border-color: $scorpion;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-primary, .btn-secondary {
+  height: 44px;
+}
+
+.btn-primary--lg, .btn-secondary--lg {
+  height: 54px;
+}
+
 .btn-green {
   background-color: #02c9b1; // TODO: reusable color in colors.css
 }
@@ -130,20 +200,6 @@ button.btn-thin {
   font-size: 13px;
 }
 
-.btn-secondary {
-  border: 1px solid #979797;
-  border-radius: 2px;
-  background-color: $white;
-  font-size: 16px;
-  line-height: 24px;
-  padding: 16px 42px;
-
-  &[disabled] {
-    background-color: $white !important;
-    opacity: .5;
-  }
-}
-
 .btn-tertiary {
   border: 1px solid transparent;
   border-radius: 2px;