button improvements

src/lib/components/button.svelte

@@ -6,46 +6,43 @@
 </script>
 
 {#if href}
-    <a href={href} class="button" class:text class:dark={$darkmode}><slot /></a>
+    <a href={href} tabindex="0" class="button" class:text class:dark={$darkmode}><slot /></a>
 {:else}
-    <button on:click class:text class:dark={$darkmode}><slot /></button>
+    <button class="button" on:click class:text class:dark={$darkmode}><slot /></button>
 {/if}
 
 <style>
-    button, .button {
+
+    .button {
         background: #006db3;
         border-radius: 5px;
         padding: 10px 15px;
         color: white;
         cursor: pointer;
-    }
-    .button:hover {
-        text-decoration: none;
-    }
-    .button {
-        display: inline-block;
-    }
-
-    button {
+        position: relative;
         border: 1px solid transparent;
-    }
-
-    button:active, .button:active {
-        background: #007bc7;
-    }
-    button:focus, .button:focus, button:hover {
-        border-color: black;
-    }
-    button.dark:focus, .button.dark:focus, button.dark:hover {
-        border-color: white;
+        transition: border-color .2s;
     }
 
     .text {
         background: transparent;
         color: black;
-        border-color: transparent;
     }
     .dark.text {
         color: white;
     }
+    .button:hover, .button:focus {
+        text-decoration: none;
+        border-color: black;
+    }
+    .button.dark:hover, .button.dark:focus {
+        border-color: white;
+    }
+    .button {
+        display: inline-block;
+    }
+
+    .button:active {
+        background: #007bc710;
+    }
 </style>

src/lib/components/navbar.svelte

@@ -14,8 +14,10 @@
 		<a href="/"><h3>Daniel Bulant</h3></a>
 		<Split />
 		<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
-		<a href="/#contact" class="big">Contact</a>
-		<a href="/posts" class="big">Blog</a>
+        <div class="big">
+            <Button text href="/#contact" class="big">Contact</Button>
+            <Button text href="/posts" class="big">Blog</Button>
+        </div>
 	</Bar>
 </div>
 

src/routes/+layout.svelte

@@ -2,8 +2,8 @@
     import Navbar from "$lib/components/navbar.svelte";
     import PageTransition from "$lib/components/pageTransition.svelte";
     import "virtual:windi.css";
-    import { browser } from "$app/env";
-    if (browser) import("virtual:windi-devtools");
+    import { browser, dev } from "$app/env";
+    if (browser && dev) import("virtual:windi-devtools");
     export let data;
 </script>