On focus, elements have a different color or outline

frontend/App.vue

@@ -227,4 +227,7 @@
 			&:after { left: 200%; }
 		}
 	}
+
+	.button:focus { border-color: #dbdbdb !important; }
+	button.delete:focus { background-color: rgba(10, 10, 10, 0.3); }
 </style>

frontend/components/Admin/QueueSongs.vue

@@ -198,4 +198,6 @@
 	}
 
 	td { vertical-align: middle; }
+
+	.is-primary:focus { background-color: #029ce3 !important; }
 </style>

frontend/components/Admin/Songs.vue

@@ -195,4 +195,6 @@
 	}
 
 	td { vertical-align: middle; }
+
+	.is-primary:focus { background-color: #029ce3 !important; }
 </style>

frontend/components/Admin/Stations.vue

@@ -58,7 +58,7 @@
 						<label class='label'>Genres</label>
 						<p class='control has-addons'>
 							<input class='input' id='new-genre' type='text' placeholder='Genre'>
-							<button class='button is-info' @click='addGenre()'>Add genre</button>
+							<a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
 						</p>
 						<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
 							{{ genre }}
@@ -67,7 +67,7 @@
 						<label class='label'>Blacklisted Genres</label>
 						<p class='control has-addons'>
 							<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre'>
-							<button class='button is-info' @click='addBlacklistedGenre()'>Add blacklisted genre</button>
+							<a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
 						</p>
 						<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
 							{{ genre }}
@@ -175,4 +175,6 @@
 		max-width: 10vw;
 		vertical-align: middle;
 	}
+
+	.is-info:focus { background-color: #0398db; }
 </style>

frontend/components/Modals/Login.vue

@@ -52,9 +52,12 @@
 
 <style type='scss' scoped>
 	.button.is-github {
-		background-color: #333 !important;
+		background-color: #333;
 		color: #fff !important;
 	}
 
+	.is-github:focus { background-color: #1a1a1a; }
+	.is-primary:focus { background-color: #029ce3 !important; }
+
 	.invert { filter: brightness(5); }
 </style>

frontend/components/Modals/Register.vue

@@ -24,7 +24,7 @@
 				<p>By registering you agree to our <a href="/terms" v-link="{ path: '/terms' }">Terms of Service</a> and <a href="/privacy" v-link="{ path: '/privacy' }">Privacy Policy</a>.</p>
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='submitModal()' href='#'>Submit</a>
+				<a class='button is-primary' href='#' @click='submitModal()'>Submit</a>
 				<a class='button is-github' :href='$parent.serverDomain + "/auth/github/authorize"'>
 					<div class='icon'>
 						<img class='invert' src='/assets/social/github.svg'/>
@@ -73,10 +73,13 @@
 
 <style type='scss' scoped>
 	.button.is-github {
-		background-color: #333 !important;
+		background-color: #333;
 		color: #fff !important;
 	}
 
+	.is-github:focus { background-color: #1a1a1a; }
+	.is-primary:focus { background-color: #028bca !important; }
+
 	.invert { filter: brightness(5); }
 
 	#recaptcha { padding: 10px 0; }

frontend/components/Sidebars/Playlist.vue

@@ -22,7 +22,7 @@
 
 			<div class='none-found' v-else>No Playlists found</div>
 
-			<a class='button create-playlist' @click='$parent.toggleModal("createPlaylist")' href='#'>Create Playlist</a>
+			<a class='button create-playlist' href='#' @click='$parent.toggleModal("createPlaylist")'>Create Playlist</a>
 		</div>
 	</div>
 </template>
@@ -147,12 +147,14 @@
     	margin-top: 20px;
 		height: 40px;
 		border-radius: 0;
-		background: rgb(3, 169, 244);
+		background: rgba(3, 169, 244, 1);
     	color: #fff !important;
 		border: 0;
 
 		&:active, &:focus { border: 0; }
 	}
 
+	.create-playlist:focus { background: #029ce3; }
+
 	.none-found { text-align: center; }
 </style>

frontend/components/Sidebars/Queue.vue

@@ -32,7 +32,7 @@
 				</div>
 			</article>
 
-			<a href='#' class='button add-to-queue' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
+			<a class='button add-to-queue' href='#' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
 		</div>
 	</div>
 </template>
@@ -102,6 +102,8 @@
 		&:active, &:focus { border: 0; }
 	}
 
+	.add-to-queue:focus { background: #029ce3; }
+
 	.media { padding: 0px 25px;}
 
 	.media-content .content {