Replace all use of <a> + href='#' with proper buttons

src/App.scss

@@ -33,6 +33,7 @@ h4 {
   max-width: 980px;
   align-content: flex-start;
 }
+
 .underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
@@ -69,7 +70,7 @@ a {
   color: var(--link, $fallback--link);
 }
 
-button {
+.button-default {
   user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
@@ -85,7 +86,9 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-], .svg-inline--fa {
+  i[class*=icon-],
+  :not(&.-icon),
+  .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -149,6 +152,29 @@ button {
   }
 }
 
+.button-unstyled {
+  background: none;
+  border: none;
+  outline: none;
+  display: inline;
+  text-align: initial;
+  font-size: 100%;
+  font-family: inherit;
+  padding: 0;
+  line-height: unset;
+  cursor: pointer;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-padded {
+    padding: 5px;
+    margin: -5px;
+  }
+}
+
 input, textarea, .select, .input {
 
   &.unstyled {
@@ -797,7 +823,7 @@ nav {
   }
 }
 
-.btn.btn-default {
+.btn.button-default {
   min-height: 28px;
 }