From c5f149171e8bd0ee7e4288c7f498744c514defad Mon Sep 17 00:00:00 2001
From: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Date: Wed, 5 Oct 2022 18:25:30 -0500
Subject: [PATCH 1/2] feat: Adding subtle transition between states on Button
 components.

---
 .../src/components/Button/useButtonStyles.ts         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 9c6b4bea2c82c6..3a14a20c7836fc 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -66,6 +66,17 @@ const useRootStyles = makeStyles({
     },
   },
 
+  // Transition styles
+  transition: {
+    transitionDuration: '100ms',
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
+
+    '@media screen and (prefers-reduced-motion: reduce)': {
+      transitionDuration: '0.01ms',
+    },
+  },
+
   // High contrast styles
   highContrast: {
     '@media (forced-colors: active)': {
@@ -450,6 +461,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
 
     // Root styles
     rootStyles.base,
+    rootStyles.transition,
     rootStyles.highContrast,
     appearance && rootStyles[appearance],
     rootStyles[size],

From 110ebc4bea8f3c690f796cdb47ba483332a84067 Mon Sep 17 00:00:00 2001
From: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Date: Wed, 5 Oct 2022 18:32:35 -0500
Subject: [PATCH 2/2] Adding change file.

---
 ...-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json

diff --git a/change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json b/change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json
new file mode 100644
index 00000000000000..7ad8ad03e50251
--- /dev/null
+++ b/change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Adding subtle transition between states on Button components.",
+  "packageName": "@fluentui/react-button",
+  "email": "makotom@microsoft.com",
+  "dependentChangeType": "patch"
+}