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

* 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 #4503

* Update comment for overlay

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,17 +64,19 @@
   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
-// 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.
+// Element that overlays the button to show focus and hover effects.
 .mat-button-focus-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;
 
   transition: $mat-button-focus-transition;