fix(button): ripples blocking mouse events on user content

* The ripple overlay intercepts all mouse events on the user content and therefore users are not able to have interactive elements in their buttons.
   Normally buttons should not contain interactive elements inside, but since the fix is very easy it wouldn't hurt fixing it.

* Removing the `(touchstart)` event that should prevent initial clicks because it didn't do anything (because of pointer-events: none) and the initial click doesn't
   seem to happen anymore.

Related to angular#4503

Author: devversion

src/lib/button/button.html

@@ -3,5 +3,4 @@
      [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
      [mdRippleCentered]="_isIconButton"
      [mdRippleTrigger]="_getHostElement()"></div>
-<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
-<div class="mat-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>
+<div class="mat-button-focus-overlay"></div>

src/lib/button/button.scss

@@ -64,6 +64,11 @@
   left: 0;
   bottom: 0;
   right: 0;
+
+  // Disable pointer events for the ripple container and focus overlay because the container
+  // will overlay the user content and we don't want to disable mouse events on the user content.
+  // Pointer events can be safely disabled because the ripple trigger element is the host element.
+  pointer-events: none;
 }
 
 // Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
@@ -74,7 +79,6 @@
   // 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;
 
   transition: $mat-button-focus-transition;