diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
index cd6231ff53eef4..d60494f1647dc1 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -7,8 +7,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="IntroductionButton">Button</Button>
+        <Button className="IntroductionButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -54,7 +54,7 @@ function Styles() {
 
   return (
     <style>{`
-  .CustomButton {
+  .IntroductionButton {
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -66,29 +66,29 @@ function Styles() {
     transition: all 150ms ease;
     cursor: pointer;
     border: 1px solid ${cyan[500]};
-    box-shadow: 0 2px 4px ${
-      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    box-shadow: 0 2px 1px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton.Mui-active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton.Mui-focusVisible {
     box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
     outline: none;
   }
-  .CustomButton:disabled {
+  .IntroductionButton.Mui-disabled {
     background-color: ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-  }
-  .CustomButton:disabled:hover {
-    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    transform: scale(1);
   }
   `}</style>
   );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
index cd6231ff53eef4..d60494f1647dc1 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -7,8 +7,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="IntroductionButton">Button</Button>
+        <Button className="IntroductionButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -54,7 +54,7 @@ function Styles() {
 
   return (
     <style>{`
-  .CustomButton {
+  .IntroductionButton {
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -66,29 +66,29 @@ function Styles() {
     transition: all 150ms ease;
     cursor: pointer;
     border: 1px solid ${cyan[500]};
-    box-shadow: 0 2px 4px ${
-      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    box-shadow: 0 2px 1px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton.Mui-active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton.Mui-focusVisible {
     box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
     outline: none;
   }
-  .CustomButton:disabled {
+  .IntroductionButton.Mui-disabled {
     background-color: ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-  }
-  .CustomButton:disabled:hover {
-    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    transform: scale(1);
   }
   `}</style>
   );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview
index 2d592aac5304f0..a7acca3d14ff40 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview
@@ -1,7 +1,7 @@
 <React.Fragment>
   <Stack spacing={2} direction="row">
-    <Button className="CustomButton">Button</Button>
-    <Button className="CustomButton" disabled>
+    <Button className="IntroductionButton">Button</Button>
+    <Button className="IntroductionButton" disabled>
       Disabled
     </Button>
   </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
index e72752c1f92a32..f4fb7b397e82e7 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -47,34 +47,32 @@ const Button = styled(BaseButton)(
   transition: all 150ms ease;
   cursor: pointer;
   border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 4px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
   }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
index e72752c1f92a32..f4fb7b397e82e7 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -47,34 +47,32 @@ const Button = styled(BaseButton)(
   transition: all 150ms ease;
   cursor: pointer;
   border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 4px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
   }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
index 96a8c746bb3d0c..6b5aa4107e7c7b 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef((props, ref) => {
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
index 8a6709ac7701e0..5562d64b7f61f7 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <BaseButton
         ref={ref}
         className={clsx(
-          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
           className,
         )}
         {...other}
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
index 7804b369743ab5..5de362a93bda6a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -6,9 +6,9 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled>{'focusableWhenDisabled = false'}</Button>
       <Button disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -60,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -69,13 +70,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
index 7804b369743ab5..5de362a93bda6a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -6,9 +6,9 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled>{'focusableWhenDisabled = false'}</Button>
       <Button disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -60,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -69,13 +70,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
index 28ea0e4f494e55..13ae2ccca285de 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
@@ -1,4 +1,4 @@
-<Button disabled>focusableWhenDisabled = false</Button>
+<Button disabled>{'focusableWhenDisabled = false'}</Button>
 <Button disabled focusableWhenDisabled>
-  focusableWhenDisabled = true
+  {'focusableWhenDisabled = true'}
 </Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index 8eedd1230fb8ca..2b1817d016ee03 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -7,10 +7,10 @@ export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
       <Button slots={{ root: 'span' }} disabled>
-        focusableWhenDisabled = false
+        {'focusableWhenDisabled = false'}
       </Button>
       <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -62,6 +62,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -71,13 +72,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 9d780d9fbd68db..27d361413b8fe4 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -12,10 +12,10 @@ export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
       <Button slots={{ root: 'span' }} disabled>
-        focusableWhenDisabled = false
+        {'focusableWhenDisabled = false'}
       </Button>
       <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -67,6 +67,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -76,13 +77,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 ) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
index 0cd36adb01d5a1..61742c2ce449ad 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
@@ -1,6 +1,6 @@
 <Button slots={{ root: 'span' }} disabled>
-  focusableWhenDisabled = false
+  {'focusableWhenDisabled = false'}
 </Button>
 <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
-  focusableWhenDisabled = true
+  {'focusableWhenDisabled = true'}
 </Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple.js
similarity index 88%
rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
rename to docs/data/base/components/button/UnstyledButtonsSimple.js
index 89f8b2d36cb0c7..35e72c4373306f 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple.js
@@ -58,6 +58,7 @@ const Button = styled(BaseButton)(
   &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &:focus-visible {
@@ -65,16 +66,13 @@ const Button = styled(BaseButton)(
     outline: none;
   }
 
-  &:disabled {
+  &.Mui-disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple.tsx
similarity index 88%
rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx
index 89f8b2d36cb0c7..35e72c4373306f 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple.tsx
@@ -58,6 +58,7 @@ const Button = styled(BaseButton)(
   &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &:focus-visible {
@@ -65,16 +66,13 @@ const Button = styled(BaseButton)(
     outline: none;
   }
 
-  &:disabled {
+  &.Mui-disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview
similarity index 100%
rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview
rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
deleted file mode 100644
index c16e86532f8bfb..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { Button } from '@mui/base/Button';
-import { useTheme } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSimple() {
-  return (
-    <React.Fragment>
-      <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
-          Disabled
-        </Button>
-      </Stack>
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomButton {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        background-color: ${cyan[500]};
-        padding: 8px 16px;
-        border-radius: 8px;
-        color: white;
-        transition: all 150ms ease;
-        cursor: pointer;
-        border: 1px solid ${cyan[500]};
-        box-shadow: 0 2px 4px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
-        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-      }
-      .CustomButton:hover {
-        background-color: ${cyan[600]};
-      }
-      .CustomButton:active {
-        background-color: ${cyan[700]};
-      }
-      .CustomButton:focusVisible {
-        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-        outline: none;
-      }
-      .CustomButton:disabled {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-        color: ${isDarkMode ? grey[200] : grey[700]};
-        border: 0;
-        cursor: not-allowed;
-        box-shadow: none;
-      }
-      .CustomButton:disabled:hover {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
deleted file mode 100644
index c16e86532f8bfb..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { Button } from '@mui/base/Button';
-import { useTheme } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSimple() {
-  return (
-    <React.Fragment>
-      <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
-          Disabled
-        </Button>
-      </Stack>
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomButton {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        background-color: ${cyan[500]};
-        padding: 8px 16px;
-        border-radius: 8px;
-        color: white;
-        transition: all 150ms ease;
-        cursor: pointer;
-        border: 1px solid ${cyan[500]};
-        box-shadow: 0 2px 4px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
-        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-      }
-      .CustomButton:hover {
-        background-color: ${cyan[600]};
-      }
-      .CustomButton:active {
-        background-color: ${cyan[700]};
-      }
-      .CustomButton:focusVisible {
-        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-        outline: none;
-      }
-      .CustomButton:disabled {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-        color: ${isDarkMode ? grey[200] : grey[700]};
-        border: 0;
-        cursor: not-allowed;
-        box-shadow: none;
-      }
-      .CustomButton:disabled:hover {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview
deleted file mode 100644
index 2d592aac5304f0..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-<React.Fragment>
-  <Stack spacing={2} direction="row">
-    <Button className="CustomButton">Button</Button>
-    <Button className="CustomButton" disabled>
-      Disabled
-    </Button>
-  </Stack>
-  <Styles />
-</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
deleted file mode 100644
index 49d7bfb820ac2b..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Button as BaseButton } from '@mui/base/Button';
-import Stack from '@mui/material/Stack';
-import clsx from 'clsx';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledButtonsSimple() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={`${isDarkMode ? 'dark' : undefined}`}>
-      <Stack spacing={2} direction="row">
-        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-          Button
-        </CustomButton>
-        <CustomButton disabled>Disabled</CustomButton>
-      </Stack>
-    </div>
-  );
-}
-
-const CustomButton = React.forwardRef((props, ref) => {
-  const { className, ...other } = props;
-  return (
-    <BaseButton
-      ref={ref}
-      className={clsx(
-        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
-        className,
-      )}
-      {...other}
-    />
-  );
-});
-
-CustomButton.propTypes = {
-  className: PropTypes.string,
-};
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
deleted file mode 100644
index 8d9009a8a58943..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
-import Stack from '@mui/material/Stack';
-import clsx from 'clsx';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledButtonsSimple() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={`${isDarkMode ? 'dark' : undefined}`}>
-      <Stack spacing={2} direction="row">
-        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-          Button
-        </CustomButton>
-        <CustomButton disabled>Disabled</CustomButton>
-      </Stack>
-    </div>
-  );
-}
-
-const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { className, ...other } = props;
-    return (
-      <BaseButton
-        ref={ref}
-        className={clsx(
-          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
-          className,
-        )}
-        {...other}
-      />
-    );
-  },
-);
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
deleted file mode 100644
index 25ff0c531391b5..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-<Stack spacing={2} direction="row">
-  <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-    Button
-  </CustomButton>
-  <CustomButton disabled>Disabled</CustomButton>
-</Stack>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index 384440da87e7ce..976a79bb52caaf 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -60,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -69,13 +70,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 51abef61edb7f9..976a79bb52caaf 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {
-  Button as BaseButton,
-  buttonClasses,
-  ButtonTypeMap,
-} from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsSpan() {
   return (
@@ -65,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -74,13 +70,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
-  `,
-) as PolymorphicComponent<ButtonTypeMap>;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js
deleted file mode 100644
index 50bc1292d1e6e7..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { Button } from '@mui/base/Button';
-import { useTheme } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSpan() {
-  return (
-    <React.Fragment>
-      <Stack spacing={2} direction="row">
-        <Button className="CustomButton" slots={{ root: 'span' }}>
-          Button
-        </Button>
-        <Button className="CustomButton" slots={{ root: 'span' }} disabled>
-          Disabled
-        </Button>
-      </Stack>
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-  return (
-    <style>{`
-      .CustomButton {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        background-color: ${cyan[500]};
-        padding: 8px 16px;
-        border-radius: 8px;
-        color: white;
-        transition: all 150ms ease;
-        cursor: pointer;
-        border: 1px solid ${cyan[500]};
-        box-shadow: 0 2px 1px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
-        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-      }
-      .CustomButton:hover {
-        background-color: ${cyan[600]};
-      }
-      .CustomButton:active {
-        background-color: ${cyan[700]};
-      }
-      .CustomButton:focusVisible {
-        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-        outline: none;
-      }
-      .CustomButton[aria-disabled='true'] {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-        color: ${isDarkMode ? grey[200] : grey[700]};
-        border: 0;
-        cursor: not-allowed;
-        box-shadow: none;
-      }
-    `}</style>
-  );
-}
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx
deleted file mode 100644
index 50bc1292d1e6e7..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { Button } from '@mui/base/Button';
-import { useTheme } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSpan() {
-  return (
-    <React.Fragment>
-      <Stack spacing={2} direction="row">
-        <Button className="CustomButton" slots={{ root: 'span' }}>
-          Button
-        </Button>
-        <Button className="CustomButton" slots={{ root: 'span' }} disabled>
-          Disabled
-        </Button>
-      </Stack>
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-  return (
-    <style>{`
-      .CustomButton {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        background-color: ${cyan[500]};
-        padding: 8px 16px;
-        border-radius: 8px;
-        color: white;
-        transition: all 150ms ease;
-        cursor: pointer;
-        border: 1px solid ${cyan[500]};
-        box-shadow: 0 2px 1px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
-        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-      }
-      .CustomButton:hover {
-        background-color: ${cyan[600]};
-      }
-      .CustomButton:active {
-        background-color: ${cyan[700]};
-      }
-      .CustomButton:focusVisible {
-        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-        outline: none;
-      }
-      .CustomButton[aria-disabled='true'] {
-        background-color: ${isDarkMode ? grey[700] : grey[200]};
-        color: ${isDarkMode ? grey[200] : grey[700]};
-        border: 0;
-        cursor: not-allowed;
-        box-shadow: none;
-      }
-    `}</style>
-  );
-}
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview
deleted file mode 100644
index f5854b7a13d486..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<React.Fragment>
-  <Stack spacing={2} direction="row">
-    <Button className="CustomButton" slots={{ root: 'span' }}>
-      Button
-    </Button>
-    <Button className="CustomButton" slots={{ root: 'span' }} disabled>
-      Disabled
-    </Button>
-  </Stack>
-  <Styles />
-</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
deleted file mode 100644
index dbe0c9e6b7e1e2..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
-import { styled } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSpan() {
-  return (
-    <Stack spacing={2} direction="row">
-      <Button slots={{ root: 'span' }}>Button</Button>
-      <Button slots={{ root: 'span' }} disabled>
-        Disabled
-      </Button>
-    </Stack>
-  );
-}
-
-const blue = {
-  200: '#99CCFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0066CC',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Button = styled(BaseButton)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
-  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
-
-  &:hover {
-    background-color: ${blue[600]};
-  }
-
-  &:active {
-    background-color: ${blue[700]};
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-
-  &.Mui-disabled {
-    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  &.Mui-disabled:hover {
-    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  }
-`,
-);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
deleted file mode 100644
index dbe0c9e6b7e1e2..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
-import { styled } from '@mui/system';
-import Stack from '@mui/material/Stack';
-
-export default function UnstyledButtonsSpan() {
-  return (
-    <Stack spacing={2} direction="row">
-      <Button slots={{ root: 'span' }}>Button</Button>
-      <Button slots={{ root: 'span' }} disabled>
-        Disabled
-      </Button>
-    </Stack>
-  );
-}
-
-const blue = {
-  200: '#99CCFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0066CC',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Button = styled(BaseButton)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
-  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
-
-  &:hover {
-    background-color: ${blue[600]};
-  }
-
-  &:active {
-    background-color: ${blue[700]};
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-
-  &.Mui-disabled {
-    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  &.Mui-disabled:hover {
-    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  }
-`,
-);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview
deleted file mode 100644
index 3a8d9ed0ae21de..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<Button slots={{ root: 'span' }}>Button</Button>
-<Button slots={{ root: 'span' }} disabled>
-  Disabled
-</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js
deleted file mode 100644
index 5fd52f0d74ea8f..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Button as BaseButton } from '@mui/base/Button';
-import Stack from '@mui/material/Stack';
-import clsx from 'clsx';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledButtonsSimple() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={`${isDarkMode ? 'dark' : undefined}`}>
-      <Stack spacing={2} direction="row">
-        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-          Button
-        </CustomButton>
-        <CustomButton slots={{ root: 'span' }} disabled>
-          Disabled
-        </CustomButton>
-      </Stack>
-    </div>
-  );
-}
-
-const CustomButton = React.forwardRef((props, ref) => {
-  const { className, disabled, ...other } = props;
-  return (
-    <BaseButton
-      ref={ref}
-      className={clsx(
-        'cursor-pointer transition text-sm font-sans font-semibold leading-normal rounded-lg px-4 py-2 border border-solid border-violet-500  hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none',
-        !disabled &&
-          'text-white bg-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed]',
-        disabled &&
-          'text-slate-700 dark:text-slate-200 bg-slate-200 dark:bg-slate-700 cursor-not-allowed shadow-none hover:bg-slate-200 hover:dark:bg-slate-700 border-none',
-        className,
-      )}
-      disabled={disabled}
-      {...other}
-    />
-  );
-});
-
-CustomButton.propTypes = {
-  className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-};
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx
deleted file mode 100644
index 4e7aef776baed9..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
-import Stack from '@mui/material/Stack';
-import clsx from 'clsx';
-import { useTheme } from '@mui/system';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledButtonsSimple() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={`${isDarkMode ? 'dark' : undefined}`}>
-      <Stack spacing={2} direction="row">
-        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-          Button
-        </CustomButton>
-        <CustomButton slots={{ root: 'span' }} disabled>
-          Disabled
-        </CustomButton>
-      </Stack>
-    </div>
-  );
-}
-
-const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { className, disabled, ...other } = props;
-    return (
-      <BaseButton
-        ref={ref}
-        className={clsx(
-          'cursor-pointer transition text-sm font-sans font-semibold leading-normal rounded-lg px-4 py-2 border border-solid border-violet-500  hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none',
-          !disabled &&
-            'text-white bg-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed]',
-          disabled &&
-            'text-slate-700 dark:text-slate-200 bg-slate-200 dark:bg-slate-700 cursor-not-allowed shadow-none hover:bg-slate-200 hover:dark:bg-slate-700 border-none',
-          className,
-        )}
-        disabled={disabled}
-        {...other}
-      />
-    );
-  },
-);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview
deleted file mode 100644
index 6eae560418bde6..00000000000000
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-<Stack spacing={2} direction="row">
-  <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
-    Button
-  </CustomButton>
-  <CustomButton slots={{ root: 'span' }} disabled>
-    Disabled
-  </CustomButton>
-</Stack>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js
index 06e14137b45610..a39184fd15bad9 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.js
+++ b/docs/data/base/components/button/UnstyledLinkButton.js
@@ -1,16 +1,19 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { prepareForSlot } from '@mui/base/utils';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
 
+const LinkSlot = prepareForSlot(Link);
+
 export default function UnstyledLinkButton() {
   return (
     <Stack spacing={2} direction="row">
-      <Button href={'https://mui.com/'}>Standard link</Button>
-      <Link href={'https://mui.com/'}>
-        <Button>Next link</Button>
-      </Link>
+      <Button href="https://mui.com/">Standard link</Button>
+      <Button href="https://mui.com/" slots={{ root: LinkSlot }}>
+        Next.js link
+      </Button>
     </Stack>
   );
 }
@@ -43,6 +46,7 @@ const Button = styled(BaseButton)(
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
+  text-decoration: none;
   background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
@@ -58,26 +62,24 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx
index 06e14137b45610..a39184fd15bad9 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx
@@ -1,16 +1,19 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { prepareForSlot } from '@mui/base/utils';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
 
+const LinkSlot = prepareForSlot(Link);
+
 export default function UnstyledLinkButton() {
   return (
     <Stack spacing={2} direction="row">
-      <Button href={'https://mui.com/'}>Standard link</Button>
-      <Link href={'https://mui.com/'}>
-        <Button>Next link</Button>
-      </Link>
+      <Button href="https://mui.com/">Standard link</Button>
+      <Button href="https://mui.com/" slots={{ root: LinkSlot }}>
+        Next.js link
+      </Button>
     </Stack>
   );
 }
@@ -43,6 +46,7 @@ const Button = styled(BaseButton)(
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
+  text-decoration: none;
   background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
@@ -58,26 +62,24 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx.preview b/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
index b2a4b57c531af4..3c5dd7dea15d2c 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx.preview
@@ -1,4 +1,4 @@
-<Button href={'https://mui.com/'}>Standard link</Button>
-<Link href={'https://mui.com/'}>
-  <Button>Next link</Button>
-</Link>
\ No newline at end of file
+<Button href="https://mui.com/">Standard link</Button>
+<Button href="https://mui.com/" slots={{ root: LinkSlot }}>
+  Next.js link
+</Button>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
index 63e5e2b1cd80ce..cb4ffcdb27b603 100644
--- a/docs/data/base/components/button/UseButton.js
+++ b/docs/data/base/components/button/UseButton.js
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-
-import { useButton } from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
+import { useButton } from '@mui/base/useButton';
 
 const CustomButton = React.forwardRef(function CustomButton(props, ref) {
   const { children, disabled } = props;
@@ -13,14 +12,15 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) {
     rootRef: ref,
   });
 
-  const classes = {
-    active,
-    disabled,
-    focusVisible,
-  };
-
   return (
-    <CustomButtonRoot {...getRootProps()} className={clsx(classes)}>
+    <CustomButtonRoot
+      {...getRootProps()}
+      className={clsx({
+        active,
+        disabled,
+        focusVisible,
+      })}
+    >
       {children}
     </CustomButtonRoot>
   );
@@ -87,26 +87,24 @@ const CustomButtonRoot = styled('button')(
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.focusVisible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
index a200ac9ec3c918..bb277cba10acb6 100644
--- a/docs/data/base/components/button/UseButton.tsx
+++ b/docs/data/base/components/button/UseButton.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { ButtonProps } from '@mui/base/Button';
-import { useButton } from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
+import { useButton } from '@mui/base/useButton';
+import { ButtonProps } from '@mui/base/Button';
 
 const CustomButton = React.forwardRef(function CustomButton(
   props: ButtonProps,
@@ -15,14 +15,15 @@ const CustomButton = React.forwardRef(function CustomButton(
     rootRef: ref,
   });
 
-  const classes = {
-    active,
-    disabled,
-    focusVisible,
-  };
-
   return (
-    <CustomButtonRoot {...getRootProps()} className={clsx(classes)}>
+    <CustomButtonRoot
+      {...getRootProps()}
+      className={clsx({
+        active,
+        disabled,
+        focusVisible,
+      })}
+    >
       {children}
     </CustomButtonRoot>
   );
@@ -80,26 +81,24 @@ const CustomButtonRoot = styled('button')(
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.focusVisible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 38412762441a86..1ce20c7cfdf67b 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -32,14 +32,14 @@ The Button behaves similar to the native HTML `<button>`, so it wraps around the
 The following demo shows how to create and style two basic buttons.
 Notice that the second button cannot be clicked due to the `disabled` prop:
 
-{{"demo": "UnstyledButtonsSimple"}}
+{{"demo": "UnstyledButtonsSimple.js"}}
 
 ### Anatomy
 
 The Button component is composed of a root `<button>` slot with no interior slots:
 
 ```html
-<button class="BaseButton-root">
+<button class="MuiButton-root">
   <!-- button text goes here -->
 </button>
 ```
@@ -61,7 +61,7 @@ If you provide a non-interactive element such as a `<span>`, the Button componen
 
 Compare the attributes on the `<span>` in this demo with the Button from the previous demo—try inspecting them both with your browser's dev tools:
 
-{{"demo": "UnstyledButtonsSpan"}}
+{{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
 If a Button is customized with a non-button element (for instance, `<Button slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
@@ -127,7 +127,7 @@ You can even use SVGs, as shown in the demo below:
 
 ### Using with links
 
-The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/learn/basics/navigate-between-pages/link-component):
+The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link):
 
 {{"demo": "UnstyledLinkButton.js", "defaultCodeOpen": true}}
 
diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index 9782e03f54e6c6..abd855b542db19 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/packages/mui-material-next/src/Button/Button.tsx
@@ -312,7 +312,7 @@ export const ButtonRoot = styled(ButtonBase, {
       backgroundColor: hoveredContainerColor[ownerState.variant ?? 'text'],
       boxShadow: hoveredContainerElevation[ownerState.variant ?? 'text'],
     },
-    [`&.${buttonBaseClasses.active}`]: {
+    '&:active': {
       '--md-comp-button-icon-color': 'var(--md-comp-button-pressed-icon-color)',
       ...((ownerState.disableRipple || ownerState.disableTouchRipple) && {
         backgroundColor: pressedContainerColor[ownerState.variant ?? 'text'],