diff --git a/components/button/__test__/index.spec.js b/components/button/__test__/index.spec.js
index 01cb6ca61..e217195d7 100644
--- a/components/button/__test__/index.spec.js
+++ b/components/button/__test__/index.spec.js
@@ -2,7 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
-import theme from '../theme.scss';
+import theme from '../theme.css';
 import Button, { Button as RawButton } from '../Button';
 
 const getRenderedClassName = (tree, Component) => {
diff --git a/components/button/_config.scss b/components/button/_config.scss
deleted file mode 100644
index 4a37d8b0c..000000000
--- a/components/button/_config.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-$button-neutral-color: $color-white !default;
-$button-neutral-color-contrast: $palette-grey-900 !default;
-$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
-$button-primary-color-contrast: $color-primary-contrast !default;
-$button-primary-color-hover: rgba($color-primary, .2) !default;
-$button-primary-color: $color-primary !default;
-$button-accent-color-contrast: $color-primary-contrast !default;
-$button-accent-color-hover: rgba($color-accent, .2) !default;
-$button-accent-color: $color-accent !default;
-$button-disabled-text-color: rgba($color-black, 0.26) !default;
-$button-disabled-background-color: rgba($color-black, 0.12) !default;
-$button-border-radius: 0.2 * $unit !default;
-$button-floating-font-size: $unit * 2.4 !default;
-$button-floating-height: $unit * 5.6 !default;
-$button-floating-mini-height: $unit * 4 !default;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
-$button-height: $unit * 3.6 !default;
-$button-squared-icon-margin: $unit * .6 !default;
-$button-squared-min-width: 9 * $unit !default;
-$button-squared-padding: 0 $unit * 1.2 !default;
-$button-toggle-font-size: $unit * 2 !default;
diff --git a/components/button/_mixins.scss b/components/button/_mixins.scss
deleted file mode 100644
index 305be037a..000000000
--- a/components/button/_mixins.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
diff --git a/components/button/config.css b/components/button/config.css
new file mode 100644
index 000000000..866bd1c4f
--- /dev/null
+++ b/components/button/config.css
@@ -0,0 +1,23 @@
+:root {
+  --button-border-radius: calc(0.2 * var(--unit));
+  --button-height: calc(3.6 * var(--unit));
+  --button-toggle-font-size: calc(2 * var(--unit));
+  --button-primary-color: var(--color-primary);
+  --button-primary-color-hover: color(var(--color-primary) a(20%));
+  --button-primary-color-contrast: var(--color-primary-contrast);
+  --button-accent-color-contrast: var(--color-primary-contrast);
+  --button-accent-color-hover: color(var(--color-accent) a(20%));
+  --button-accent-color: var(--color-accent);
+  --button-neutral-color: var(--color-white);
+  --button-neutral-color-contrast: var(--palette-grey-900);
+  --button-neutral-color-hover: color(var(--palette-grey-900) a(20%));
+  --button-floating-font-size: calc(2.4 * var(--unit));
+  --button-floating-height: calc(5.6 * var(--unit));
+  --button-floating-mini-height: calc(4 * var(--unit));
+  --button-floating-mini-font-size: calc(var(--button-floating-mini-height) / 2.25);
+  --button-disabled-text-color: color(var(--color-black) a(26%));
+  --button-disabled-background-color: color(var(--color-black) a(12%));
+  --button-squared-icon-margin: calc(0.6 * var(--unit));
+  --button-squared-min-width: calc(9 * var(--unit));
+  --button-squared-padding: 0 calc(1.2 * var(--unit));
+}
diff --git a/components/button/index.js b/components/button/index.js
index b2767af2e..d2a596c13 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -4,7 +4,7 @@ import { buttonFactory } from './Button.js';
 import { iconButtonFactory } from './IconButton.js';
 import FontIcon from '../font_icon/FontIcon.js';
 import themedRippleFactory from '../ripple';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
diff --git a/components/button/theme.css b/components/button/theme.css
new file mode 100644
index 000000000..0ff059eb8
--- /dev/null
+++ b/components/button/theme.css
@@ -0,0 +1,238 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.button {
+  align-content: center;
+  align-items: center;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  flex-direction: row;
+  font-size: calc(1.4 * var(--unit));
+  font-weight: 500;
+  height: var(--button-height);
+  justify-content: center;
+  letter-spacing: 0;
+  line-height: 1;
+  outline: none;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    box-shadow 0.2s var(--animation-curve-fast-out-linear-in),
+    background-color 0.2s var(--animation-curve-default),
+    color 0.2s var(--animation-curve-default);
+  white-space: nowrap;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  & > span:not([data-react-toolbox='tooltip']) {
+    display: inline-block;
+    line-height: var(--button-height);
+    vertical-align: middle;
+  }
+
+  & > svg {
+    display: inline-block;
+    fill: currentColor;
+    font-size: 120%;
+    height: var(--button-height);
+    vertical-align: middle;
+    width: 1em;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+
+  & > .rippleWrapper {
+    overflow: hidden;
+  }
+
+  &[disabled] {
+    color: var(--button-disabled-text-color);
+    cursor: auto;
+    pointer-events: none;
+  }
+}
+
+.squared {
+  border-radius: var(--button-border-radius);
+  min-width: var(--button-squared-min-width);
+  padding: var(--button-squared-padding);
+
+  & .icon {
+    font-size: 120%;
+    margin-right: var(--button-squared-icon-margin);
+    vertical-align: middle;
+  }
+
+  & > svg {
+    margin-right: calc(0.5 * var(--unit));
+  }
+}
+
+.solid {
+  &[disabled] {
+    background-color: var(--button-disabled-background-color);
+    box-shadow: var(--shadow-2p);
+  }
+
+  &:active {
+    box-shadow: var(--shadow-2p);
+  }
+
+  &:focus:not(:active) {
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.18),
+      0 8px 16px rgba(0, 0, 0, 0.36);
+  }
+}
+
+.raised {
+  box-shadow: var(--shadow-2p);
+  composes: button;
+  composes: squared;
+  composes: solid;
+}
+
+.flat {
+  background: transparent;
+  composes: button;
+  composes: squared;
+}
+
+.floating {
+  border-radius: 50%;
+  box-shadow:
+    0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
+    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  composes: button;
+  composes: solid;
+  font-size: var(--button-floating-font-size);
+  height: var(--button-floating-height);
+  width: var(--button-floating-height);
+
+  & .icon {
+    line-height: var(--button-floating-height);
+  }
+
+  & > .rippleWrapper {
+    border-radius: 50%;
+  }
+
+  &.mini {
+    font-size: var(--button-floating-mini-font-size);
+    height: var(--button-floating-mini-height);
+    width: var(--button-floating-mini-height);
+
+    & .icon {
+      line-height: var(--button-floating-mini-height);
+    }
+  }
+}
+
+.toggle {
+  background: transparent;
+  border-radius: 50%;
+  composes: button;
+  width: var(--button-height);
+
+  & > .icon,
+  & svg {
+    font-size: var(--button-toggle-font-size);
+    line-height: var(--button-height);
+    vertical-align: middle;
+  }
+
+  & > .rippleWrapper {
+    border-radius: 50%;
+  }
+}
+
+.primary:not([disabled]) {
+  &.raised,
+  &.floating {
+    background: var(--button-primary-color);
+    color: var(--button-primary-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-primary-color);
+
+    &:focus:not(:active) {
+      background: var(--button-primary-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-primary-color-hover);
+  }
+}
+
+.accent:not([disabled]) {
+  &.raised,
+  &.floating {
+    background: var(--button-accent-color);
+    color: var(--button-accent-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-accent-color);
+
+    &:focus:not(:active) {
+      background: var(--button-accent-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-accent-color-hover);
+  }
+}
+
+.neutral:not([disabled]) {
+  &.raised,
+  &.floating {
+    background-color: var(--button-neutral-color);
+    color: var(--button-neutral-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-neutral-color-contrast);
+    &:focus:not(:active) {
+      background: var(--button-neutral-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-neutral-color-hover);
+  }
+
+  &.inverse {
+    &.raised,
+    &.floating {
+      background-color: var(--button-neutral-color-contrast);
+      color: var(--button-neutral-color);
+    }
+
+    &.flat,
+    &.toggle {
+      color: var(--button-neutral-color);
+
+      &:focus:not(:active) {
+        background: var(--button-neutral-color-hover);
+      }
+    }
+
+    &.flat:hover {
+      background: var(--button-neutral-color-hover);
+    }
+  }
+}
diff --git a/components/button/theme.scss b/components/button/theme.scss
deleted file mode 100644
index d75ca421d..000000000
--- a/components/button/theme.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-@import "../colors";
-@import "../globals";
-@import "../mixins";
-@import "./config";
-@import "./mixins";
-
-.button {
-  position: relative;
-}
-
-%button {
-  @include typo-button();
-  position: relative;
-  display: inline-block;
-  height: $button-height;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
-  &::-moz-focus-inner {
-    border: 0;
-  }
-  > span:not([data-react-toolbox="tooltip"]) {
-    display: inline-block;
-    line-height: $button-height;
-    vertical-align: middle;
-  }
-  > svg {
-    display: inline-block;
-    width: 1em;
-    height: $button-height;
-    font-size: 120%;
-    vertical-align: middle;
-    fill: currentColor;
-  }
-  > * {
-    pointer-events: none;
-  }
-  > .rippleWrapper {
-    overflow: hidden;
-  }
-  &[disabled] {
-    color: $button-disabled-text-color;
-    pointer-events: none;
-    cursor: auto;
-  }
-}
-
-%squared {
-  min-width: $button-squared-min-width;
-  padding: $button-squared-padding;
-  border-radius: $button-border-radius;
-  .icon {
-    margin-right: $button-squared-icon-margin;
-    font-size: 120%;
-    vertical-align: middle;
-  }
-  > svg {
-    margin-right: .5 * $unit;
-  }
-}
-
-%solid {
-  &[disabled] {
-    @include shadow-2dp();
-    background-color: $button-disabled-background-color;
-  }
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-}
-
-.raised {
-  @extend %button;
-  @extend %squared;
-  @extend %solid;
-  @include shadow-2dp();
-}
-
-.flat {
-  @extend %button;
-  @extend %squared;
-  background: transparent;
-}
-
-.floating {
-  @extend %button;
-  @extend %solid;
-  width: $button-floating-height;
-  height: $button-floating-height;
-  font-size: $button-floating-font-size;
-  border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
-  .icon {
-    line-height: $button-floating-height;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-  &.mini {
-    width: $button-floating-mini-height;
-    height: $button-floating-mini-height;
-    font-size: $button-floating-mini-font-size;
-    .icon {
-      line-height: $button-floating-mini-height;
-    }
-  }
-}
-
-.toggle {
-  @extend %button;
-  width: $button-height;
-  background: transparent;
-  border-radius: 50%;
-  > .icon, svg {
-    font-size: $button-toggle-font-size;
-    line-height: $button-height;
-    vertical-align: middle;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-}
-
-.neutral:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-neutral-color-contrast;
-    background-color: $button-neutral-color;
-  }
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:focus:not(:active) {
-      background: $button-neutral-color-hover;
-    }
-  }
-  &.flat:hover {
-    background: $button-neutral-color-hover;
-  }
-
-  &.inverse {
-    &.raised, &.floating {
-      color: $button-neutral-color;
-      background-color: $button-neutral-color-contrast;
-    }
-    &.flat, &.toggle {
-      color: $button-neutral-color;
-      &:focus:not(:active) {
-        background: $button-neutral-color-hover;
-      }
-    }
-    &.flat:hover {
-      background: $button-neutral-color-hover;
-    }
-  }
-}
-
-@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
-@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);