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 0000000000000..7ad8ad03e5025
--- /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"
+}
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 9c6b4bea2c82c..3a14a20c7836f 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],