Add Link styled button

recipes/src/components/Button/index.tsx

@@ -16,6 +16,8 @@ type CBKButtonProps = {
   raised?: boolean,
   outlined?: boolean,
   icon?: string,
+  link?: boolean,
+  active?: boolean,
   onClick?: (e: any) => void,
   small?: boolean,
   type?: 'button' | 'submit' | 'reset';
@@ -31,7 +33,10 @@ export default function CBKButton(props: CBKButtonProps) {
     'cbk-btn--outlined': props.outlined,
     'cbk-btn--disabled': props.disabled,
     'cbk-btn--small': props.small,
+    'cbk-btn--link': props.link,
+    'cbk-btn--active active': props.active,
   })
+
   if (props.icon) {
     return (
       <IconButton

recipes/src/components/Button/styles.scss

@@ -150,11 +150,15 @@ button.cbk-btn {
   }
 
   &--small {
-    line-height: 1rem;
+    line-height: 1.2rem;
     font-size: 0.8rem;
     font-weight: lighter;
   }
 
+  &--link {
+    @include link($white, $yellow, $black);
+  }
+
   &:last-child {
     margin-right: 0;
   }

recipes/src/styles/_fonts.scss

@@ -50,7 +50,7 @@ $letter-spacing-enhanced: 0.5px;
   font-size: $size;
 }
 
-@mixin link($color: $black, $bgColor: $yellow) {
+@mixin link($color: $black, $bgColor: $yellow, $activeColor: $black) {
   color: $color;
   background:
      linear-gradient(
@@ -59,15 +59,20 @@ $letter-spacing-enhanced: 0.5px;
      );
   background-position: 0 100%;
   background-repeat: repeat-x;
-  background-size: 4px 4px;
+  background-size: 2px 2px;
   text-decoration: none;
-  transition: background-size .2s;
+  transition: background-size .2s, color .2s;
   text-decoration: none;
   font-family: $font-family-display;
   font-size: $font-size-regular;
   letter-spacing: 0.075em;
 
   &:hover {
-    background-size: 4px 50px;
+    background-size: 2px 50px;
+    color: $activeColor;
+  }
+  #{if(&, '&.active', '.link--active')} {
+    background-size: 2px 50px;
+    color: $activeColor;
   }
 }