diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index 2685eaf..8e7694e 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -1,11 +1,14 @@
 <template>
-  <button class="button">
+  <button class="button" :class="type">
     <slot />
   </button>
 </template>
 
 <script>
 export default {
+props: {
+  type: { type: String, default: "" }
+}
 };
 </script>
 
@@ -28,4 +31,19 @@ export default {
     box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 1);
   }
 }
+.login {
+  transition: 
+    letter-spacing ease-in-out 200ms, 
+    box-shadow ease-in-out 150ms, 
+    transform ease-in-out 100ms;
+    
+  &:hover {
+    letter-spacing: .5px;
+    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.65);
+  }
+  &:active {
+    background-color: darken($primary, 30%);
+    transform: scale(.95);
+  }
+}
 </style>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 1ef6a3f..02bd8dc 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -2,7 +2,12 @@
   <div class="home">
     <div class="container">
       <img src="https://i.imgur.com/KQDKLRa.png">
-      <Button v-if="!loading && !user" class="mt-2" @click.native="loginWithGithub()">
+      <Button 
+        v-if="!loading && !user"
+        class="mt-2"
+        @click.native="loginWithGithub()"
+        type="login"
+      >
         <span class="mr-1">Login with Github</span>
         <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
       </Button>