fix ripple on button and show custom class

Author: williamernest

src/app/custom-button/custom-button.component.html

@@ -1 +1 @@
-<button class="mdc-button mdc-button--raised">Example Button</button>
+<button class="my-button mdc-button mdc-button--raised">Example Button</button>

src/app/custom-button/custom-button.component.scss

@@ -1,2 +1,6 @@
 @import "@material/ripple/mdc-ripple";
 @import "@material/button/mdc-button";
+
+.my-button {
+  @include mdc-button-container-fill-color(blue);
+}

src/app/custom-button/custom-button.component.ts

@@ -13,7 +13,7 @@ export class CustomButtonComponent implements AfterViewInit, OnDestroy {
   constructor(public myElement: ElementRef) { }
 
   ngAfterViewInit() {
-    this.ripple = new MDCRipple(this.myElement.nativeElement);
+    this.ripple = new MDCRipple(this.myElement.nativeElement.querySelector('.mdc-button'));
   }
 
   ngOnDestroy() {