diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index b2e07ca..5caa1e6 100644
--- a/src/components/Button/button.scss
+++ b/src/components/Button/button.scss
@@ -1,7 +1,6 @@
 @import '../../styles/common';
 
-.ds-btn {
-  // button scoped variables
+:root {
   --button-bgcolour-primary: var(--colour-amber-30);
   --button-bgcolour-primary-active: var(--colour-amber-30);
   --button-bgcolour-primary-focus: var(--colour-amber-30);
@@ -37,7 +36,9 @@
   --button-colour-tertiary-focus: var(--colour-grey-80);
   --button-colour-tertiary-hover: var(--colour-grey-80);
   --button-colour-tertiary-disabled: var(--colour-grey-40);
+}
 
+.ds-btn {
   @include btn-base;
   border-radius: calc(0.25 * var(--space-unit));
   display: inline-flex;
diff --git a/src/styles/20-tools/_mixins/_button.scss b/src/styles/20-tools/_mixins/_button.scss
index e226f8f..cbc11f7 100644
--- a/src/styles/20-tools/_mixins/_button.scss
+++ b/src/styles/20-tools/_mixins/_button.scss
@@ -9,7 +9,6 @@
 
 @mixin btn-base {
   align-items: center;
-  background: transparent;
   border: 0;
   box-sizing: border-box;
   cursor: pointer;