diff --git a/app/packs/stylesheets/okbr/application.scss b/app/packs/stylesheets/okbr/application.scss
index 7ef41f0..37e82fa 100644
--- a/app/packs/stylesheets/okbr/application.scss
+++ b/app/packs/stylesheets/okbr/application.scss
@@ -22,15 +22,26 @@ body {
   text-align: left;
 }
 
+.button {
+  text-transform: uppercase;
+}
+
 .button--sc {
-  background-color: $color-pink;
-  color: black;
-  border-radius: 100px;
-  padding: .5rem 1rem;
   font-weight: 900;
   font-size: 22px;
 }
 
+.button--shadow{
+  $shadows: (
+    primary: shade($color-primary, 50%),
+    secondary: shade($color-purple, 50%),
+  );
+
+  @include modifiers(background-color, $shadows){
+    color: $white;
+  }
+}
+
 .floating-helper__content {
   border-top: none;
 }
diff --git a/app/packs/stylesheets/okbr/variables.scss b/app/packs/stylesheets/okbr/variables.scss
index a640cb8..5f02c98 100644
--- a/app/packs/stylesheets/okbr/variables.scss
+++ b/app/packs/stylesheets/okbr/variables.scss
@@ -5,3 +5,10 @@ $color-gray: #ececec;
 
 $color-primary: $color-pink;
 $anchor-color: $color-purple;
+
+$button-padding: .5rem 1rem;
+$button-background: $color-pink;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $black;
+$button-color-alt: $white;
+$button-radius: 100px;