buttons: change styling to match design

- Global roundness (radius: 100px).
- Color palette ($primary, $secondary).
- Text transform: uppercase.

Closes: #17

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;
 }

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;