diff --git a/src/_includes/components/alert.html b/src/_includes/components/alert.html
index 411a7f1a53..0d7904b495 100644
--- a/src/_includes/components/alert.html
+++ b/src/_includes/components/alert.html
@@ -1,4 +1,4 @@
-<div markdown="div" class="alert alert--{{ include.type }}" role="alert">
+<div class="alert alert--{{ include.type }}" role="alert">
   {% include_relative assets/icons/alerts/{{ include.type }}.svg %}
   {{ include.content }}
 </div>
diff --git a/src/_includes/components/button-fill.html b/src/_includes/components/button-fill.html
new file mode 100644
index 0000000000..586dd1f019
--- /dev/null
+++ b/src/_includes/components/button-fill.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-fill {% if include.size %}button--{{ include.size }}{% endif %} {% if include.variant %}button-fill--{{ include.variant }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button-hollow.html b/src/_includes/components/button-hollow.html
new file mode 100644
index 0000000000..51efbd8f25
--- /dev/null
+++ b/src/_includes/components/button-hollow.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-hollow {% if include.size %}button--{{ include.size }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button.html b/src/_includes/components/button.html
new file mode 100644
index 0000000000..7e7b5c42b4
--- /dev/null
+++ b/src/_includes/components/button.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button {% if include.size %}button--{{ include.size }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss
new file mode 100644
index 0000000000..3182547df7
--- /dev/null
+++ b/src/_sass/components/_button-fill.scss
@@ -0,0 +1,20 @@
+.button-fill {
+  border-radius: 4px;
+  background-color: color(primary);
+  color: color(white);
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    box-shadow: 0 4px 8px 0 rgba(82, 189, 149, 0.08);
+  }
+
+  &--white {
+    background-color: color(white);
+    color: color(gray);
+    transition: 0.3s color;
+
+    &:hover {
+      color: color(success);
+    }
+  }
+}
diff --git a/src/_sass/components/_button-hollow.scss b/src/_sass/components/_button-hollow.scss
new file mode 100644
index 0000000000..180e4a0df8
--- /dev/null
+++ b/src/_sass/components/_button-hollow.scss
@@ -0,0 +1,4 @@
+.button-hollow {
+  color: color(secondary);
+  padding: 12px 0;
+}
diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss
new file mode 100644
index 0000000000..7398c567fe
--- /dev/null
+++ b/src/_sass/components/_button.scss
@@ -0,0 +1,24 @@
+.button {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+  padding: 12px 15px;
+  display: inline-block;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &--small {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.14;
+    padding: 9px 8px;
+  }
+
+  &--large {
+    padding: 12px 23px;
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
index 59c16e24f4..5d6aea93a4 100644
--- a/src/_sass/segment.scss
+++ b/src/_sass/segment.scss
@@ -43,6 +43,9 @@
 @import "components/note";
 @import "components/button-link";
 @import "components/alert";
+@import "components/button";
+@import "components/button-fill";
+@import "components/button-hollow";
 @import "components/markdown";
 @import "components/list-steps";
 @import "components/input";
diff --git a/src/assets/icons/symbols/thumb-down.svg b/src/assets/icons/symbols/thumb-down.svg
new file mode 100644
index 0000000000..02c2d492cc
--- /dev/null
+++ b/src/assets/icons/symbols/thumb-down.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.992 5.374c-.08.58-.73.96-1.43 1.05-.15.02-.32.04-.49.05.06.01.11.01.16.02.71.08 1.23.47 1.15 1.05-.08.58-.73.96-1.43 1.05-.34.04-.72.07-1.13.09h-.01c-.24.01-.49.02-.75.02-.48.02-1.11.04-1.59.08-.36.03-.41.28-.37.53.35.9.54 1.91.5 2.91-.04.85-.6 1.679-1.41 1.769-.671.07-1.161-.39-.991-.98.56-1.93-2.07-4.22-4.2-5.51V1.505c1.66-1.03 4.35-1.56 7.48-1.5.19 0 .39.01.62.02h.09c.22.01.46.03.73.05.71.06 1.54.51 1.5 1.09-.03.51-.4.79-.87.93.27.02.54.04.79.06.71.06 1.24.45 1.17 1.04-.06.58-.7.97-1.41 1.07-.02 0-.05.01-.07.01.29.02.57.03.81.05.71.03 1.23.47 1.15 1.05zM2 7.994H0v-7h2c.55 0 1 .45 1 1v5c0 .56-.45 1-1 1z" fill="#A5B0BA" fill-rule="nonzero"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/symbols/thumb-up.svg b/src/assets/icons/symbols/thumb-up.svg
new file mode 100644
index 0000000000..965450daea
--- /dev/null
+++ b/src/assets/icons/symbols/thumb-up.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.992 8.626c-.08-.58-.73-.96-1.43-1.05a6.75 6.75 0 00-.49-.05c.06-.01.11-.01.16-.02.71-.08 1.23-.47 1.15-1.05-.08-.58-.73-.96-1.43-1.05-.34-.04-.72-.07-1.13-.09h-.01c-.24-.01-.49-.02-.75-.02-.48-.02-1.11-.04-1.59-.08-.36-.03-.41-.28-.37-.53.35-.9.54-1.91.5-2.91-.04-.85-.6-1.679-1.41-1.769-.671-.07-1.161.39-.991.98.56 1.93-2.07 4.22-4.2 5.51v5.999c1.66 1.03 4.35 1.56 7.48 1.5.19 0 .39-.01.62-.02h.09c.22-.01.46-.03.73-.05.71-.06 1.54-.51 1.5-1.09-.03-.51-.4-.79-.87-.93.27-.02.54-.04.79-.06.71-.06 1.24-.45 1.17-1.04-.06-.58-.7-.97-1.41-1.07-.02 0-.05-.01-.07-.01.29-.02.57-.03.81-.05.71-.03 1.23-.47 1.15-1.05zM2 6.006H0v7h2c.55 0 1-.45 1-1v-5c0-.56-.45-1-1-1z" fill="#A5B0BA" fill-rule="nonzero"/>
+</svg>
\ No newline at end of file
diff --git a/src/styleguide.md b/src/styleguide.md
index dfeae3e5ca..30839928bf 100644
--- a/src/styleguide.md
+++ b/src/styleguide.md
@@ -56,6 +56,13 @@ layout: page
 {% include components/alert.html type="warning" content="This is my sample note." %}
 {% include components/alert.html type="error" content="This is my sample note." %}
 
+{% include components/button.html text="Sign up" href="https://segment.com" %}
+{% include components/button-fill.html size="large" text="Yes" href="https://segment.com" %}
+{% include components/button.html size="large" text="Yes" href="https://segment.com" %}
+{% include components/button-fill.html size="small" text="Sign up" href="https://segment.com" %}
+{% include components/button-fill.html size="small" variant="white" text="Yes" href="https://segment.com" %}
+{% include components/button-hollow.html size="small" text="Log in" href="https://segment.com" %}
+
 {% include components/list-steps.html number="1" heading="Totally new here?" content="Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}
 {% include components/list-steps.html number="2" heading="Totally new here?" content="Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}
-{% include components/list-steps.html number="3" heading="Totally new here?" content="Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}
\ No newline at end of file
+{% include components/list-steps.html number="3" heading="Totally new here?" content="Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks." %}