diff --git a/package-lock.json b/package-lock.json
index f467cf2be..06d0a6f3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
         "npm-check-updates": "16.10.16",
         "plop": "3.1.2",
         "postcss": "8.4.36",
-        "postcss-advanced-variables": "4.0.0",
+        "postcss-advanced-variables": "3.0.1",
         "postcss-cli": "11.0.0",
         "postcss-color-function": "4.1.0",
         "postcss-custom-properties": "13.3.4",
@@ -26553,18 +26553,48 @@
       }
     },
     "node_modules/postcss-advanced-variables": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-advanced-variables/-/postcss-advanced-variables-4.0.0.tgz",
-      "integrity": "sha512-ooRwPl53XDEfZtc52BimJFwTKFPqeJGmSUuX90ZsN+ZTP9ViTsyLbRcD0gwtEw7su0o6P71ps7gpnOa4eGkx4g==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-advanced-variables/-/postcss-advanced-variables-3.0.1.tgz",
+      "integrity": "sha512-JqVjfkmqPoazMobVeQYzbt7djcDGJfMlpwBd9abTqmzWR40tvIUMXpTU5w3riqz7h+wYPY7V6GF8BIXL/ybEfg==",
       "dev": true,
       "dependencies": {
-        "@csstools/sass-import-resolve": "^1.0.0"
+        "@csstools/sass-import-resolve": "^1.0.0",
+        "postcss": "^7.0.6"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-advanced-variables/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-advanced-variables/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
       },
-      "peerDependencies": {
-        "postcss": "^8.4"
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-advanced-variables/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/postcss-calc": {
diff --git a/package.json b/package.json
index ee9aca6f9..837441689 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
     "postcss": "8.4.36",
-    "postcss-advanced-variables": "4.0.0",
+    "postcss-advanced-variables": "3.0.1",
     "postcss-cli": "11.0.0",
     "postcss-color-function": "4.1.0",
     "postcss-custom-properties": "13.3.4",
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
index 120223a0e..adc331be5 100644
--- a/packages/uui-button/lib/uui-button.element.ts
+++ b/packages/uui-button/lib/uui-button.element.ts
@@ -47,6 +47,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+ *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
  */
 @defineElement('uui-button')
 export class UUIButtonElement extends UUIFormControlMixin(
@@ -338,6 +339,11 @@ export class UUIButtonElement extends UUIFormControlMixin(
 
         transition: var(--uui-button-transition, none);
       }
+
+      #button:focus-visible {
+        outline: 2px solid var(--color-emphasis);
+      }
+
       button[disabled]:active,
       a:not([href]):active {
         animation: ${UUIHorizontalShakeAnimationValue};
@@ -436,13 +442,6 @@ export class UUIButtonElement extends UUIFormControlMixin(
         font-weight: var(--uui-button-font-weight, 700);
       }
 
-      #button:focus-visible {
-        outline: 2px solid var(--color-emphasis);
-      }
-
-      :host([look='primary']) #button:focus-visible {
-        outline-offset: 2px;
-      }
       :host([look='primary']:hover) #button {
         background-color: var(
           --uui-button-background-color-hover,
@@ -451,6 +450,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
         color: var(--uui-button-contrast-hover, var(--color-contrast));
         border-color: var(--uui-button-border-color-hover, transparent);
       }
+
+      /* special outline offset tof primary style so you can see the outline */
+      :host([look='primary']) #button:focus-visible {
+        outline-offset: 2px;
+      }
+
       :host([look='primary'][disabled]) #button {
         background-color: var(
           --uui-button-background-color-disabled,