1 files changed, 40 insertions, 0 deletions

diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index e69de29..5bd66d9 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -0,0 +1,40 @@
+$button-padding : $baseline-x2 $baseline-x4;
+$button-bgcolor : $color-blue;
+$button-bgcolor-hover : darken($color-blue, 10%);
+$button-color : $color-white;
+$button-radius : 3px;
+
+$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
+$button-outline-bgcolor: transparent;
+$button-outline-color: $color-blue;
+$button-outline-color-hover: darken( $color-blue, 10% );
+
+.c-button {
+  padding: $button-padding;
+  display: inline-block;
+  font: inherit;
+  color: $button-color;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background-color: $button-bgcolor;
+  border-radius: $button-radius;
+}
+
+.c-button:hover { background-color: $button-bgcolor-hover;}
+
+.c-button--outline {
+  padding: $button-outline-padding;
+  color: $button-outline-color;
+  border: 1px solid $button-outline-color;
+  background-color: $button-outline-bgcolor;
+}
+
+.c-button--outline:hover {
+  color: #1893E0;
+  border-color: $button-outline-color-hover;
+  background-color: $button-outline-bgcolor;
+}