diff --git a/assets/css/header.css b/assets/css/header.css
index 910e98ce..beaf5bd6 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -40,11 +40,9 @@
     height: 18px;
 }
 
-a#theme-toggle  {
-    font-size: 24px;
-    user-select: none;
-    margin: auto 4px;
-    cursor: pointer
+button#theme-toggle  {
+    font-size: 26px;
+    margin: auto 4px
 }
 
 body.dark #moon {
diff --git a/assets/css/reset.css b/assets/css/reset.css
index 4b8e09f8..ee8e77bd 100644
--- a/assets/css/reset.css
+++ b/assets/css/reset.css
@@ -10,6 +10,7 @@ html {
 }
 
 a,
+button,
 body,
 h1,
 h2,
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d91cc6fe..301367c4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -61,7 +61,7 @@
             {{- end }}
             <span class="logo-switches">
                 {{- if (not .Site.Params.disableThemeToggle) }}
-                <a id="theme-toggle" accesskey="t" title="(Alt + T)">
+                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                     <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
@@ -80,7 +80,7 @@
                         <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                         <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                     </svg>
-                </a>
+                </button>
                 {{- end}}
                 {{ $lang := .Lang}}
                 {{ $separator := or .Title (not .Site.Params.disableThemeToggle)}}