Designing "Clicky" button

public/input/button/Button.jsx

@@ -80,7 +80,9 @@ export default class Button extends React.Component {
         href={href}
         to={to}
       >
-        {contents}
+        <span class="o-btn__inner">
+          {contents}
+        </span>
       </ElementType>
     );
   }

public/styles/elements/all.scss

@@ -5,6 +5,6 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
-* {
+*,*:after,*:before,*::after,*::before {
   box-sizing: border-box;
 }

public/styles/objects/_button.scss

@@ -12,18 +12,53 @@
  *    1.0.1 - 2018/05/14
  */
 
+//Default Button (applies to all styles)
 .o-btn {
   position: relative;
   display: inline-block;
   cursor: pointer;
-  border: $s-color--btn-default__border;
-  padding: 1em 1em;
-  transition: all 0.2s $s-animation--ease-out;
+  padding-bottom: 0.5em;
+  overflow: hidden;
 
-  @include t-horizontal-gradient($s-color--btn-default__top, $s-color--btn-default__bottom);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    border: $s-color--btn-default__border;
+    border-radius: 0.5em;
+    background: $s-color--btn-default__bottom;
+  }
 
+  &__inner {
+    position: relative;
+    background: white;
+    display: block;
+    padding: 0.75em 1.5em;
+    border-radius: 0.5em;
+    border: $s-color--btn-default__border;
+    transition: all 0.1s $s-animation--ease-out;
+  }
 
   &:hover {
-    @include t-vertical-gradient($s-color--btn-default-hover__top, $s-color--btn-default-hover__bottom);
+    .o-btn__inner {
+      @include t-translate-y(0.1em);
+    }
+  }
+
+  &:active {
+    .o-btn__inner {
+      @include t-translate-y(0.4em);
+      background: $s-color--btn-default-hover__top;
+    }
+  }
+
+  &:focus {
+    &::before,
+    .o-btn__inner {
+      border-color: $s-color--btn-default__focus;
+    }
   }
 }

public/styles/settings/colors.scss

@@ -48,6 +48,6 @@ $s-color--loader: $s-color--swatch-blue;
 $s-color--btn-default__top: #FFF;
 $s-color--btn-default__bottom: #FBFBFB;
 $s-color--btn-default__border: 1px solid #DDD;
+$s-color--btn-default__focus: $s-color--swatch-blue;
 
 $s-color--btn-default-hover__top: $s-color--btn-default__bottom;
-$s-color--btn-default-hover__bottom: #EEE;