Use router-link component where possible, update CSS so that an <a> tag still appears as a button with class 'button'

src/App.vue

@@ -83,17 +83,17 @@
 		</modal-window>
 		<header class='header'>
 			<div class='header__group'>
-				<div class='logo' @click='$router.push("/")'>{{name}}</div>
+				<router-link class='logo' to='/'>{{name}}</router-link>
 			</div>
 			<div class='header__group'>
 				<template v-if='$store.state.username'>
 					<notification-button></notification-button>
-					<button @click='$router.push("/admin")' class='button button--thin_text' v-if='$store.state.admin'>
+					<router-link to='/admin' class='button button--thin_text' v-if='$store.state.admin'>
 						Admin settings
-					</button>
-						<button @click='$router.push("/settings")' class='button button--thin_text' >
+					</router-link>
+					<router-link to='/settings' class='button button--thin_text' >
 						Settings
-					</button>
+					</router-link>
 					<loading-button @click='logout' :loading='loadingLogout' class='button--thin_text'>
 						Log out
 					</loading-button>
@@ -396,6 +396,7 @@
 		@include text($font--role-emphasis, 2rem, normal);
 		@include user-select(none);
 		cursor: pointer;
+		background: none;
 	}
 
 	.search {

src/assets/scss/elementStyles.scss

@@ -47,8 +47,9 @@ b, strong {
 	padding: 0.5rem;
 	cursor: pointer;
 	letter-spacing: 0.25px;
+	background: none;
 	background-color: #fff;
-	color: lighten($color__text--primary, 30%);
+	color: lighten($color__text--primary, 30%) !important;
 	transition: background-color 0.2s, border-color 0.2s, filter 0.2s;
 	outline: none;
 
@@ -61,9 +62,6 @@ b, strong {
 		border-color: $color__gray--darkest;
 	}
 
-	@at-root #{&}__icon {
-	}
-
 	@at-root #{&}--borderless {
 		color: $color__text--secondary;
 		border-color: transparent;
@@ -124,17 +122,17 @@ b, strong {
 	@mixin filled_button($background, $border, $text: #fff) {
 		background-color: $background;
 		border-color: $border;
-		color: $text;
+		color: $text !important;
 		
 		&:hover {
 			background-color: darken($background, 5%);
 			border-color: rgba($border, 0.6);
-			color: darken(#fff, 5%);
+			color: darken(#fff, 5%) !important;
 		}
 		&:active {
 			background-color: darken($background, 10%);
 			border-color: rgba($border, 0.6);
-			color: darken(#fff, 10%);
+			color: darken(#fff, 10%) !important;
 		}
 	}
 	@at-root #{&}--blue {

src/components/routes/Index.vue

@@ -6,7 +6,10 @@
 				v-model='selectedFilterOption'
 				class='thread_sorting__filter'
 			></select-options>
-			<button class='button button--blue' v-if='this.$store.state.username' @click='$router.push("/thread/new")'>Post new thread</button>
+			<router-link
+				class='button button--blue'
+				v-if='$store.state.username' to='/thread/new'
+			>Post new thread</router-link>
 		</div>
 		<div class='threads_main'>
 			<div class='threads_main__side_bar'>