diff --git a/src/components/status.jsx b/src/components/status.jsx
index bbf20c31..4862f8ce 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -849,7 +849,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
             <span />
             <button
               type="button"
-              class="carousel-button plain"
+              class="carousel-button plain2"
               onClick={() => setShowMediaModal(false)}
             >
               <Icon icon="x" />
@@ -859,7 +859,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
             <div class="carousel-controls">
               <button
                 type="button"
-                class="carousel-button plain"
+                class="carousel-button plain2"
                 hidden={showMediaModal === 0}
                 onClick={(e) => {
                   e.preventDefault();
@@ -892,7 +892,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
               </span>
               <button
                 type="button"
-                class="carousel-button plain"
+                class="carousel-button plain2"
                 hidden={showMediaModal === mediaAttachments.length - 1}
                 onClick={(e) => {
                   e.preventDefault();
diff --git a/src/index.css b/src/index.css
index 39ac54c3..6eda4ae7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -121,6 +121,11 @@ button > * {
 }
 
 :is(button, .button).plain {
+  background-color: transparent;
+  color: var(--link-color);
+  backdrop-filter: blur(12px);
+}
+:is(button, .button).plain2 {
   background-color: transparent;
   color: var(--link-color);
   backdrop-filter: blur(12px) invert(.25) brightness(1.5);
@@ -170,7 +175,7 @@ select.plain {
   img:hover, video:hover {
     filter: brightness(1);
   }
-  :is(button, .button).plain {
+  :is(button, .button).plain2 {
     backdrop-filter: blur(12px) brightness(.5);
   }
 }