diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
new file mode 100644
index 0000000..d2cf5e5
--- /dev/null
+++ b/src/scss/cdb-components/buttons.scss
@@ -0,0 +1,168 @@
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Primary
+
+Layout Component:
+[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
+.CDB-Button {
+ padding: $baseSize $baseSize + 12;
+ border-radius: $baseSize / 2;
+ cursor: pointer;
+
+ .CDB-Button-Text {
+ display: block;
+ }
+ &.is-disabled {
+ cursor: default;
+ opacity: 0.24;
+ }
+}
+
+.CDB-Button--small {
+ padding: $baseSize - 3 $baseSize + 4;
+}
+
+.CDB-Button--primary {
+ background: $cBlue;
+ color: $cWhite;
+
+ &:hover {
+ background: darken($cBlue, 8%);
+ }
+ &:active {
+ background: darken($cBlue, 16%);
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: $cBlue;
+ }
+ &:active {
+ background: $cBlue;
+ }
+ }
+}
+
+
+
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Secondary
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+
+.CDB-Button--secondary {
+ border: 1px solid $cBlue;
+ background: $cWhite;
+ color: $cBlue;
+
+ &:hover {
+ background: rgba($cBlue, 0.08);
+ }
+ &:active {
+ background: $cBlue;
+ color: $cWhite;
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: $cWhite;
+ }
+ &:active {
+ background: $cWhite;
+ }
+ }
+}