diff --git a/src/stylesheets/abstracts/_variables.scss b/src/stylesheets/abstracts/_variables.scss
index bf5ab91..ef30847 100644
--- a/src/stylesheets/abstracts/_variables.scss
+++ b/src/stylesheets/abstracts/_variables.scss
@@ -9,6 +9,11 @@ $secondary-colour:  #46b43d;
 $primary-colour-dark: darken-colour($primary-colour);
 $secondary-colour-dark: darken-colour($secondary-colour);
 
+$button-colours: (
+	'primary': $primary-colour,
+	'secondary': $secondary-colour
+);
+
 // Breakpoints
 $breakpoints: (
 	'small'  : 767px,
diff --git a/src/stylesheets/components/_button.scss b/src/stylesheets/components/_button.scss
new file mode 100644
index 0000000..dfaa752
--- /dev/null
+++ b/src/stylesheets/components/_button.scss
@@ -0,0 +1,35 @@
+.btn {
+	display: inline-block;
+	text-decoration: none;
+	padding: .5em 2em;
+	border-radius: .5em;
+	border: 2px solid;
+	font-size: 1em;
+	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+	transition: background-color .25s;
+
+}
+
+@each $name, $colour in $button-colours {
+	.btn.btn--#{$name}.btn--full {
+		background: $colour;
+		border-color: $colour;
+		color: white;
+
+		@include on-event() {
+			background-color: darken-colour($colour);
+			border-color: darken-colour($colour);
+		}
+	}
+
+	.btn.btn--#{$name}.btn--outline {
+		background: white;
+		border-color: $colour;
+		color: $colour;
+
+		@include on-event() {
+			background-color: $colour;
+			color: white;
+		}
+	}
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index b24d65f..603c651 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -5,3 +5,5 @@
 @import 'vendors/normalise';
 
 @import 'base/typography';
+
+@import 'components/button';
diff --git a/views/partials/button.hbs b/views/partials/button.hbs
new file mode 100644
index 0000000..3360083
--- /dev/null
+++ b/views/partials/button.hbs
@@ -0,0 +1,3 @@
+<a class='btn btn--{{ style }} btn--{{ colour }}' href='{{ to }}'>
+	{{ content }}
+</a>