diff --git a/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
new file mode 100644
index 00000000000000..8b47a90cb51d55
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Converted ButtonBasicExample to use mergeStyles instead of SCSS.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
index ee0ef8aa003cf2..0cdcf9100cfc6e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
@@ -20,7 +20,6 @@ import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Link } from '../../Link';
-import './examples/Button.Basic.Example.scss';
 import * as exampleStylesImport from '../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
index e6365cb5769c9d..7dcfd418f4b1f2 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   ActionButton,
   IButtonProps
@@ -12,8 +18,11 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <ActionButton
           data-automation-id='test'
           iconProps={ { iconName: 'AddFriend' } }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
index c2e6e11cbd06aa..5490a3a062eb8d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   IButtonProps,
   DefaultButton
@@ -11,8 +17,11 @@ export class ButtonAnchorExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <DefaultButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
deleted file mode 100644
index 748891141c6c00..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:global {
-  .ms-BasicButtonsExample .ms-Button {
-    margin: 10px 0;
-  }
-  .ms-BasicButtonsTwoUp {
-    display: flex;
-    & > * {
-      flex-grow: 1;
-    }
-    .ms-Label {
-      margin-bottom: 10px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
new file mode 100644
index 00000000000000..dea19c6a76381f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -0,0 +1,41 @@
+import { IStyle } from '../../../Styling';
+
+export interface IButtonBasicExampleStyleProps {
+  /**
+   * 404 No Style Props Found
+   */
+}
+
+export interface IButtonBasicExampleStyles {
+  example?: IStyle;
+  twoup?: IStyle;
+}
+
+export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExampleStyles {
+  return ({
+    example: [
+      'ms-BasicButtonsExample',
+      {
+        selectors: {
+          '.ms-Button': {
+            margin: '10px 0'
+          }
+        }
+      }
+    ],
+    twoup: [
+      'ms-BasicButtonsTwoUp',
+      {
+        display: 'flex',
+        selectors: {
+          '& > *': {
+            flexGrow: 1
+          },
+          '.ms-Label': {
+            marginBottom: '10px'
+          }
+        }
+      }
+    ]
+  });
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
index 1c11cbc0a92d45..92c31dded940ab 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   CompoundButton,
   IButtonProps
@@ -13,8 +19,11 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.example, classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <CompoundButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
index 6d2462494958bf..c1edb4cdf9e5f1 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
index 22149f6c4fe4e1..88fd480f3c5411 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonIconExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <IconButton
           disabled={ disabled }
           checked={ checked }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
index 235e55dcf04d6e..23c09a4f712b23 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
index 03fc8143da301e..8cbef6dc44719e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}>
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 8e72b37c6bbb61..2c1d498a523b63 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { getCustomSplitButtonStyles } from './Button.Split.Example.styles';
@@ -12,8 +18,11 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 8533e8da7e6ef0..2124d506341f07 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
@@ -65,8 +70,11 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
         </DefaultButton>
       );
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         { button }
       </div>
     );