added buttons

src/components/input/Button/styles.scss

@@ -0,0 +1,118 @@
+@keyframes pulse {
+  0% { opacity: 1; }
+  100% { opacity: 0.3; }
+}
+
+.button {
+  height: $input_height;
+  border: none;
+  box-sizing: border-box;
+  padding: 0 30px;
+  color: white;
+  text-transform: uppercase;
+  font: $font_14_semibold;
+
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+
+  background: $button_bg_color;
+  border-radius: $input_radius;
+
+  fill: white;
+  stroke: white;
+  user-select: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
+  box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+  filter: grayscale(0);
+
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    box-shadow: transparentize(#E933A5, 0.4) 0 2px 8px;
+
+    &:global(.disabled) {
+      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      cursor: auto;
+    }
+
+    &:active {
+      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+    }
+  }
+
+  &:global(.seamless) {
+    background: transparent;
+    color: black;
+    box-shadow: none;
+    fill: black;
+    stroke: black;
+    padding: 0;
+  }
+
+  &:global(.transparent) {
+    background: transparent;
+    color: white;
+    box-shadow: transparentize(black, 0.5) 0 0 4px;
+    padding: 0;
+    fill: black;
+    stroke: black;
+  }
+
+  &:global(.red) {
+    fill: $red;
+    stroke: $red;
+    color: $red;
+  }
+
+  &:global(.disabled), &:global(.grey) {
+    opacity: 0.3;
+    //background: black;
+    filter: grayscale(100%);
+  }
+
+  &:global(.icon) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  &:global(.is_loading) {
+    span, svg {
+      animation: pulse 0.25s infinite alternate;
+    }
+  }
+
+  > * {
+    margin: 0 5px;
+
+    &:first-child { margin-left: 0; }
+    &:last-child { margin-right: 0; }
+  }
+}
+
+.micro { height: 20px; font: $font_12_semibold; padding: 0 15px;}
+.mini { height: 28px; }
+.normal { height: 38px; }
+.big { height: 40px; }
+.giant { height: 50px; padding: 0 15px; min-width: 50px; }
+.disabled {
+  opacity: 0.5;
+}
+.icon_left {
+  margin-right: 10px;
+  width: 20px;
+  height: 20px;
+}
+
+.icon_right {
+  margin-left: 10px;
+  width: 20px;
+  height: 20px;
+}