diff --git a/site/app.js b/site/app.js
index ccf364a..95091a9 100644
--- a/site/app.js
+++ b/site/app.js
@@ -229,7 +229,7 @@
 
     const updateShowAllButton = () => {
       if (!showAllButton) return;
-      showAllButton.textContent = showingAll
+      showAllButton.querySelector('.show-all-btn-text').textContent = showingAll
         ? showAllButton.dataset.hideLabel
         : showAllButton.dataset.showLabel;
     };
diff --git a/site/styles.css b/site/styles.css
index 6b8d383..5e78d2e 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -497,6 +497,7 @@ nav {
 }
 
 .show-all-btn {
+  display: grid;
   padding: 10px 20px;
   color: var(--text);
   font: inherit;
@@ -509,6 +510,25 @@ nav {
   transition: all 0.25s;
 }
 
+.show-all-btn::before,
+.show-all-btn::after,
+.show-all-btn-text {
+  grid-area: 1 / 1;
+}
+
+.show-all-btn::before,
+.show-all-btn::after {
+  visibility: hidden;
+}
+
+.show-all-btn::before {
+  content: attr(data-show-label);
+}
+
+.show-all-btn::after {
+  content: attr(data-hide-label);
+}
+
 .show-all-btn:hover {
   transform: translateY(-2px);
   background: var(--surface-2);
diff --git a/templates/index.html b/templates/index.html
index 86d5675..f3112d0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -300,7 +300,7 @@ <h2 class="section-title">{{site.allComparisons}}</h2>
       </div>
       <button class="show-all-btn" id="showAllButton" type="button"
               data-show-label="{{filters.showAll}}" data-hide-label="{{filters.hideAll}}">
-        {{filters.showAll}}
+        <span class="show-all-btn-text">{{filters.showAll}}</span>
       </button>
       <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
         <span class="view-toggle-icon">⊞</span>