static get styles() {
    return [
      css`
        :host {
          overflow: hidden;
          transition: 0.1s ease-in;
          user-select: none;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        :host:hover {
          cursor: pointer;
        }

        #ripple {
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 100%;
          position: relative;
          transform: scale(0);
        }

        .animate {
          animation: ripple 0.4s linear;
        }

        @keyframes ripple {
          100% {
            transform: scale(12);
            background-color: transparent;
          }
        }
      `,
    ];
  }
Material Design Ripple Element

- should be placed in a 'positioned' context (having positon: (realtive/fixed/absolute))