diff --git a/.changeset/btn-hover-opaque.md b/.changeset/btn-hover-opaque.md
new file mode 100644
index 000000000..6091dd494
--- /dev/null
+++ b/.changeset/btn-hover-opaque.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the default `.btn` turning see-through on hover and active by mixing the tint over `--tblr-bg-surface`.
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 81de7996c..d308f1d29 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -1137,6 +1137,12 @@ $btn-active-border-tint-amount: 10% !default;
 
 $btn-border-color: var(--border-color) !default;
 
+// Hover and active backgrounds of the default button. `$hover-bg` and
+// `$active-bg` are tints over `transparent`; a button over a photo would
+// show it through, so the same tints are mixed over the button surface instead.
+$btn-hover-bg: light-dark(color-transparent(var(--body-color), 0.06, var(--bg-surface)), color-transparent(var(--body-color), 0.08, var(--bg-surface))) !default;
+$btn-active-bg: light-dark(color-transparent(var(--primary), 0.04, var(--bg-surface)), color-transparent(var(--primary), 0.12, var(--bg-surface))) !default;
+
 $btn-color: var(--body-color) !default;
 $btn-padding-y: $input-btn-padding-y !default;
 $btn-padding-x: $input-btn-padding-x !default;
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 2f0b2c8e7..050b94eab 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -12,10 +12,10 @@
   --btn-bg: var(--bg-surface);
   --btn-color: var(--body-color);
   --btn-border-color: #{$btn-border-color};
-  --btn-hover-bg: var(--hover-bg);
+  --btn-hover-bg: #{$btn-hover-bg};
   --btn-hover-border-color: var(--border-active-color);
   --btn-active-color: #{$active-color};
-  --btn-active-bg: var(--active-bg);
+  --btn-active-bg: #{$btn-active-bg};
   --btn-active-border-color: #{$active-border-color};
   position: relative;