diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index 33e3cd162b60..8d682ec86f2a 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -3,24 +3,6 @@
 @import '../core/style/button-common';
 
 
-// Applies a focus style to an md-button element.
-@mixin md-button-focus {
-  &::after {
-    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-    // black, 12% opacity shade over the normal color (for both light and dark themes).
-    // We do this by placing an :after pseudo-element with the appropriate shade over the button.
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    content: '';
-    background-color: rgba(black, 0.12);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-}
-
 // Flat and raised button standards
 $md-button-padding: 0 16px !default;
 $md-button-min-width: 88px !default;
@@ -74,7 +56,9 @@ $md-mini-fab-padding: 8px !default;
   }
 
   &.md-button-focus {
-    @include md-button-focus();
+    .md-button-overlay {
+      opacity: 1;
+    }
   }
 }
 
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 8ae3e6322f54..3eefbb9d7318 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -7,15 +7,15 @@
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  &.md-primary::after {
+  &.md-primary .md-button-overlay {
     background-color: md-color($primary, 0.12);
   }
 
-  &.md-accent::after {
+  &.md-accent .md-button-overlay {
     background-color: md-color($accent, 0.12);
   }
 
-  &.md-warn::after {
+  &.md-warn .md-button-overlay {
     background-color: md-color($warn, 0.12);
   }
 }
diff --git a/src/lib/button/button.html b/src/lib/button/button.html
index 99e784458c79..113a039453ae 100644
--- a/src/lib/button/button.html
+++ b/src/lib/button/button.html
@@ -4,3 +4,4 @@
     [md-ripple-trigger]="getHostElement()"
     [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
     md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
+<div class="md-button-overlay" (touchstart)="$event.preventDefault()"></div>
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 92f3278ef83f..7fd2b1c33805 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -10,11 +10,13 @@
   // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
   &:hover {
     // Use the same visual treatment for hover as for focus.
-    @include md-button-focus();
+    .md-button-overlay {
+      opacity: 1;
+    }
   }
 
   &[disabled]:hover {
-    &.md-primary, &.md-accent, &.md-warn, &::after {
+    &.md-primary, &.md-accent, &.md-warn, .md-button-overlay {
       background-color: transparent;
     }
   }
@@ -56,7 +58,7 @@
 }
 
 // The ripple container should match the bounds of the entire button.
-.md-button-ripple {
+.md-button-ripple, .md-button-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -64,6 +66,18 @@
   right: 0;
 }
 
+// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
+// element, however we use a proper DOM element in order to be able to disable the default
+// touch action. This makes the buttons more responsive on touch devices.
+.md-button-overlay {
+  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
+  // black, 12% opacity shade over the normal color (for both light and dark themes).
+  background-color: rgba(black, 0.12);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+}
+
 // For round buttons, the ripple container should clip child ripples to a circle.
 .md-button-ripple-round {
   border-radius: 50%;