turn some links into btns

src/components/MainHeader.jsx

@@ -18,7 +18,7 @@ export function MainHeader(props) {
 			<div class="main-header__btn-wrap  flex  flex-v-center">
 				<button
 					id="runBtn"
-					class="hide flex flex-v-center hint--rounded hint--bottom-left"
+					class="hide btn--dark flex flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
 					onClick={props.runBtnClickHandler}
 				>
@@ -31,7 +31,7 @@ export function MainHeader(props) {
 					onClick={props.addLibraryBtnHandler}
 					data-event-category="ui"
 					data-event-action="addLibraryButtonClick"
-					class="flex-v-center hint--rounded hint--bottom-left"
+					class="btn--dark flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Add a JS/CSS library"
 				>
 					Add library{' '}
@@ -45,7 +45,7 @@ export function MainHeader(props) {
 				</Button>
 
 				<button
-					class="flex  flex-v-center hint--rounded hint--bottom-left"
+					class="btn--dark flex  flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Start a new creation"
 					onClick={props.newBtnHandler}
 				>
@@ -58,7 +58,7 @@ export function MainHeader(props) {
 				</button>
 				<button
 					id="saveBtn"
-					class={`flex  flex-v-center hint--rounded hint--bottom-left ${
+					class={`btn--dark flex  flex-v-center hint--rounded hint--bottom-left ${
 						props.isSaving ? 'is-loading' : ''
 					} ${props.unsavedEditCount ? 'is-marked' : 0}`}
 					aria-label="Save current creation (Ctrl/⌘ + S)"
@@ -77,7 +77,7 @@ export function MainHeader(props) {
 				</button>
 				<button
 					id="openItemsBtn"
-					class={`flex  flex-v-center hint--rounded hint--bottom-left ${
+					class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${
 						props.isFetchingItems ? 'is-loading' : ''
 					}`}
 					aria-label="Open a saved creation (Ctrl/⌘ + O)"
@@ -98,7 +98,7 @@ export function MainHeader(props) {
 					onClick={props.loginBtnHandler}
 					data-event-category="ui"
 					data-event-action="loginButtonClick"
-					class="hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left"
+					class="hide-on-login btn--dark flex  flex-v-center  hint--rounded  hint--bottom-left"
 					aria-label="Login/Signup"
 				>
 					Login/Signup
@@ -108,7 +108,7 @@ export function MainHeader(props) {
 					data-event-category="ui"
 					data-event-action="headerAvatarClick"
 					aria-label="See profile or Logout"
-					class="hide-on-logout hint--rounded  hint--bottom-left"
+					class="hide-on-logout btn--dark hint--rounded  hint--bottom-left"
 				>
 					<img
 						id="headerAvatarImg"

src/components/SavedItemPane.jsx

@@ -201,23 +201,21 @@ export default class SavedItemPane extends Component {
 				<div class="flex flex-v-center" style="justify-content: space-between;">
 					<h3>My Library ({this.items.length})</h3>
 
-					<div class="main-header__btn-wrap">
+					<div>
-						<a
+						<button
 							onClick={this.props.exportBtnClickHandler}
-							href=""
+							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
 							aria-label="Export all your creations into a single importable file."
 						>
 							Export
-						</a>
+						</button>
-						<a
+						<button
 							onClick={this.importBtnClickHandler.bind(this)}
-							href=""
+							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
 							aria-label="Only the file that you export through the 'Export' button can be imported."
 						>
 							Import
-						</a>
+						</button>
 					</div>
 				</div>
 				<input

src/style.css

@@ -244,7 +244,7 @@ textarea {
 	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
 }
 
-.btn:focus {
+[class*='btn']:focus {
 	outline-width: 4px;
 	outline-color: #b76b29;
 	outline-style: solid;
@@ -584,6 +584,7 @@ body > #demo-frame {
 	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
 }
 
+.btn--dark,
 .main-header__btn-wrap > button {
 	box-sizing: content-box;
 	font-size: 0.8em;
@@ -607,7 +608,7 @@ body > #demo-frame {
 	text-transform: uppercase;
 }
 
-.main-header__btn-wrap > button > svg {
+.btn--dark > svg {
 	fill: #9297b3;
 	margin-right: 4px;
 }
@@ -616,7 +617,7 @@ body > #demo-frame {
 	fill: crimson;
 }
 
-.main-header__btn-wrap > button:hover {
+.btn--dark:hover {
 	border-color: rgba(146, 151, 179, 0.5);
 }
 
@@ -1358,7 +1359,6 @@ body > #demo-frame {
 	background: rgba(0, 0, 0, 0.3);
 	color: white;
 	border: 0;
-	outline: 0;
 }
 
 .console:not(.is-minimized) .code-wrap__header {