diff --git a/opentech/static_src/src/sass/abstracts/_mixins.scss b/opentech/static_src/src/sass/abstracts/_mixins.scss
index 4d1e60003dadec7a3e8ac0db7a67482ca980e569..ec2c41c0b41b1d6729e8a571e504a80365127f3c 100755
--- a/opentech/static_src/src/sass/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/abstracts/_mixins.scss
@@ -77,3 +77,20 @@
         @include rem-font-size($size);
     }
 }
+
+// button mixin
+@mixin button($bg) {
+    padding: 10px 60px;
+    background: $bg;
+    border: 1px solid $color--white;
+    transition: background $transition;
+
+    &:hover {
+        background: darken($bg, 8%);
+        transition: background $transition;
+    }
+
+    &:active {
+        background: darken($bg, 25%);
+    }
+}