Add styled buttons and add props for button copy. Add button animation.

src/Funnel1.vue

@@ -37,6 +37,27 @@
         ariaLabel="Back glass"
       />
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          btnText="Primary"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimaryFocus
+          btnText="Primary Focus"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary class="button-loader"
+          btnText="w/Loader"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,6 +66,8 @@
   import vehicleImage from './components/vehicleImage';
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
+  import buttonPrimary from './components/buttons/buttonPrimary';
+  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
 
 
   export default {
@@ -53,7 +76,9 @@
       buttonFunnel,
       vehicleImage,
       imageButton,
-      confetti
+      confetti,
+      buttonPrimary,
+      buttonPrimaryFocus
     }
   }
 </script>

src/assets/img/icons/button-spinner.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z" fill="#fff"/>
+</svg>

src/assets/scss/_CustomVariables.scss

@@ -24,6 +24,7 @@ $grays: (
 $blue-200:   #E7F1F6;
 $blue-300:   #B9D7E6;
 $blue-400:   #125B7E;
+$blue-700:   #06577C;
 $blue:       #167CAC;//Default Blue (Blue 500)
 $indigo:     #6610f2;
 $purple:     #6f42c1;
@@ -95,3 +96,9 @@ $font-family-code:            $font-family-monospace;
 
 //Gutters
 $grid-gutter-width:           .75rem;
+
+//Border Radius
+$border-radius:               .25rem;
+$border-radius-sm:            .2rem;
+$border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
+$border-radius-pill:          50rem;

src/assets/scss/components/_buttons.scss

@@ -1,15 +1,44 @@
 //Custom button styles
 .btn {
-  &.btn-secondary {
+  &.btn-primary,
+  &.btn-primary-focus {
+    position: relative;
+    background: $blue-700;
+    background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
+    border: none;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $white;
+    transition: all 100ms linear; 
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &.button-loader {
+      padding: 0 48px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner.svg);
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+  }
+  &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
     margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
-    border-radius: 8px;//To match Figma border radius
-    &:after {
+    &:before {
       content: "";
       position: absolute;
       width: calc(100% + 12px);
       height: calc(100% + 12px);
-      border: 3px solid $secondary;
+      border: 3px solid $blue-700;
       background-color: $white;
       border-radius: 12px;
       left: -6px;

src/components/buttons/buttonPrimary.vue

@@ -1,3 +1,10 @@
 <template>
-  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-primary">{{btnText}}</button>
 </template>
+
+<script>
+export default {
+  name: 'buttonPrimary',
+  props: ['btnText']
+}
+</script>

src/components/buttons/buttonPrimaryFocus.vue

@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary-focus">{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonPrimaryFocus',
+  props: ['btnText']
+}
+</script>