diff --git a/src/_includes/partials/nav/theme-toggle.liquid b/src/_includes/partials/nav/theme-toggle.liquid
index f3ac5d99..1e6390c7 100644
--- a/src/_includes/partials/nav/theme-toggle.liquid
+++ b/src/_includes/partials/nav/theme-toggle.liquid
@@ -4,14 +4,14 @@
 {% endcapture %}
 <style>{{ css }}</style>
 <template id="theme-toggle-template">
-  <div class="theme__toggle">
+  <button class="theme__toggle">
     <span class="light">
       {% tablericon "sun" "Toggle light theme" %}
     </span>
     <span class="dark">
       {% tablericon "moon" "Toggle dark theme" %}
     </span>
-  </div>
+  </button>
 </template>
 <li class="client-side">
   <theme-toggle></theme-toggle>
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 354ccab8..576ba963 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -1,3 +1,8 @@
+.theme__toggle {
+  background: transparent;
+  padding: 0;
+}
+
 .theme__toggle svg {
   cursor: pointer;
 }
diff --git a/src/posts/2024/building-a-theme-toggle-web-component.md b/src/posts/2024/building-a-theme-toggle-web-component.md
index 42fd13c8..f173409b 100644
--- a/src/posts/2024/building-a-theme-toggle-web-component.md
+++ b/src/posts/2024/building-a-theme-toggle-web-component.md
@@ -75,6 +75,11 @@ async connectedCallback() {
 The CSS for this is straightforward and contains a few vars specific to my implementation (related to icon color and SVG `stroke-width`):
 
 ```css
+.theme__toggle {
+  background: transparent;
+  padding: 0;
+}
+
 .theme__toggle svg {
   cursor: pointer;
 }
@@ -118,14 +123,14 @@ The final template that leverages the component looks like this:
 {% endcapture %}
 <style>{{ css }}</style>
 <template id="theme-toggle-template">
-  <div class="theme__toggle">
+  <button class="theme__toggle">
     <span class="light">
       {% tablericon "sun" "Toggle light theme" %}
     </span>
     <span class="dark">
       {% tablericon "moon" "Toggle dark theme" %}
     </span>
-  </div>
+  </button>
 </template>
 <li class="client-side">
   <theme-toggle></theme-toggle>