diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index e5c50e450..800cecda4 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -1,96 +1,113 @@
-/*
-Sphinx-Gallery has compatible CSS to fix default sphinx themes
-Tested for Sphinx 1.3.1 for all themes: default, alabaster, sphinxdoc,
-scrolls, agogo, traditional, nature, haiku, pyramid
-Tested for Read the Docs theme 0.1.7 */
+/* ── Buttons for homepage and gallery ───────────────────────────────────── */
 
-html[data-theme="light"] div.sphx-glr-download a {
-  background-color: rgb(255, 255, 255) !important;
-  background-image: linear-gradient(to bottom, rgb(255, 255, 255), #ffffff) !important;
+.button-primary,
+.button-alt,
+div.sphx-glr-download a {
+  background-image: none !important;
   border-radius: 4px;
-  border: 1px solid #ffffff !important;
-  color: #000;
-  display: inline-block;
-  font-weight: bold;
-  padding: 1ex;
   text-align: center;
+  text-decoration: none;
 }
 
-html[data-theme="light"] div.sphx-glr-download a:hover {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 1px 5px rgba(0, 0, 0, 0.25);
-  text-decoration: none;
-  background-image: none;
-  background-color: #ffffff !important;
+/* makes homepage button take up width of column */
+.button-primary {
+  display: block;
 }
 
-html[data-theme="dark"] div.sphx-glr-download a {
-  background-color: #222832 !important;
-  background-image: linear-gradient(to bottom, #222832, #222832) !important;
-  border-radius: 4px;
-  border: 1px solid #222832 !important;
-  color: #000;
+/* Allow border override to show through on example buttons */
+div.sphx-glr-download a {
+  border: 1px solid transparent;
   display: inline-block;
-  font-weight: bold;
-  padding: 1ex;
-  text-align: center;
+  padding: 0.45rem 0.8rem;
 }
 
-html[data-theme="dark"] div.sphx-glr-download a:hover {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 1px 5px rgba(0, 0, 0, 0.25);
-  text-decoration: none;
-  background-image: none;
-  background-color: #222832 !important;
+/* force sphinx-gallery download code to inherit text color */
+div.sphx-glr-download a code.download {
+  color: inherit !important;
 }
 
-/* Version warning banner color */
-#bd-header-version-warning {
-  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
+/* horizontally align and reduce lower margin of container */
+.napari-gallery-downloads {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0 0 0.35rem;
 }
 
-#bd-header-version-warning .pst-button-link-to-stable-version {
-  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
-  border-color: var(--pst-color-secondary-bg);
-  color: var(--napari-color-text-base);
-  font-weight: 700;
+/* remove spacing around download buttons */
+.napari-gallery-downloads .sphx-glr-download {
+  margin: 0;
 }
 
-#bd-header-version-warning .pst-button-link-to-stable-version:hover {
-  background-color: var(--pst-color-secondary-bg);
-  border-color: var(--pst-color-secondary-bg);
-  color: var(--napari-color-text-base);
-  font-weight: 700;
+html[data-theme="light"] .button-primary,
+html[data-theme="light"] div.sphx-glr-download a {
+  background-color: var(--napari-primary-blue) !important;
+  border-color: var(--napari-primary-blue) !important;
+  color: var(--napari-color-text-base) !important;
 }
 
-/* ── Homepage accent cards ───────────────────────────────────────────
-   Install, Download cards with theme-aware napari blue.
-   sphinx-design marks every property !important, so we must too.     */
+html[data-theme="dark"] .button-primary,
+html[data-theme="dark"] div.sphx-glr-download a {
+  background-color: var(--napari-purple) !important;
+  border-color: var(--napari-purple) !important;
+  color: var(--napari-color-text-base) !important;
+}
 
-.homepage-button {
-  display: block;
+html[data-theme="light"] .button-primary:hover,
+html[data-theme="light"] div.sphx-glr-download a:hover {
+  background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
+  text-decoration: underline;
 }
 
-html[data-theme="light"] .homepage-button {
-  background-color: var(--napari-primary-blue) !important;
+html[data-theme="dark"] .button-primary:hover,
+html[data-theme="dark"] div.sphx-glr-download a:hover {
+  background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
+  text-decoration: underline;
+}
+
+html[data-theme="light"] .button-alt {
+  background-color: var(--pst-color-background) !important;
   border-color: var(--napari-primary-blue) !important;
   color: var(--napari-color-text-base) !important;
 }
 
-html[data-theme="dark"] .homepage-button {
-  background-color: var(--napari-purple) !important;
+html[data-theme="dark"] .button-alt {
+  background-color: var(--pst-color-background) !important;
   border-color: var(--napari-purple) !important;
   color: var(--napari-color-text-base) !important;
 }
 
-html[data-theme="light"] .homepage-button:hover {
+html[data-theme="light"] .button-alt:hover {
+  background-color: var(--pst-color-background) !important;
+  border-color: var(--napari-primary-blue) !important;
+  color: var(--napari-color-text-base) !important;
   text-decoration: underline;
-  background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
 }
 
-html[data-theme="dark"] .homepage-button:hover {
+html[data-theme="dark"] .button-alt:hover {
+  background-color: var(--pst-color-background) !important;
+  border-color: var(--napari-purple) !important;
+  color: var(--napari-color-text-base) !important;
   text-decoration: underline;
-  background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
+}
+
+/* Version warning banner color */
+#bd-header-version-warning {
+  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
+}
+
+#bd-header-version-warning .pst-button-link-to-stable-version {
+  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
+  border-color: var(--pst-color-secondary-bg);
+  color: var(--napari-color-text-base);
+  font-weight: 700;
+}
+
+#bd-header-version-warning .pst-button-link-to-stable-version:hover {
+  background-color: var(--pst-color-secondary-bg);
+  border-color: var(--pst-color-secondary-bg);
+  color: var(--napari-color-text-base);
+  font-weight: 700;
 }
 
 /* ── Homepage quicklinks (icon columns) ──────────────────────────────── */
@@ -222,9 +239,4 @@ html[data-theme="dark"] .homepage-quicklinks a {
 
 html[data-theme="dark"] img#homepage-featured-example-image {
   background-color: var(--pst-color-background) !important;
-}
-
-.homepage-example-button:hover {
-  background-color: var(--pst-color-background) !important;
-  color: var(--napari-color-text-base) !important;
 }
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index b775ffabb..aa3935234 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -64,7 +64,7 @@ theme:
 :color: primary
 :ref-type: myst
 :shadow:
-:class: homepage-button
+:class: button-primary
 
 {material-regular}`arrow_forward;1.2em` **Get started**
 ```
@@ -133,8 +133,8 @@ A standalone installer for when you want napari without setting up Python first.
       Display an image in napari and explore the viewer with a minimal example.
     </p>
     <div class="homepage-featured-example__actions">
-      <a class="sd-btn sd-btn-primary sd-shadow-sm homepage-button" href="gallery.html">Examples gallery</a>
-      <button class="sd-btn sd-btn-outline-primary sd-shadow-sm homepage-example-button" id="homepage-featured-example-reroll" type="button">Show another example</button>
+      <a class="sd-btn sd-btn-primary sd-shadow-sm button-primary" href="gallery.html">Examples gallery</a>
+      <button class="sd-btn sd-btn-outline-primary sd-shadow-sm button-alt" id="homepage-featured-example-reroll" type="button">Show another example</button>
     </div>
   </div>
   <a class="homepage-featured-example__media" href="gallery/add_image.html" aria-label="View the featured napari example">