How to add the ripple effect on a card?

Gesture enabled responsive lists
,
1

In ionic to a card you can add the button attribute, and it makes when the user tap on the card (or click) the Ripple effect is activated, which is also present in Material Design.
The question is, how can I achieve this using Mobiscroll cards?
In other words, convert a card into a button.

2

I am testing your product to see if it will serve me. And based on that, decide whether to buy it or not.
But my trial time will end, and I will not receive a courtesy response from your technical support to my question…

3

While we don’t have a built in solution for button cards, it can be achieved with some custom styling.
Here’s an example:

<mbsc-card>
  <mbsc-button class="my-card-btn">
    <mbsc-card-header>
      <mbsc-card-title>Card Title</mbsc-card-title>
      <mbsc-card-subtitle>Card Subtitle</mbsc-card-subtitle>
    </mbsc-card-header>
    <mbsc-card-content>
      Card content
    </mbsc-card-content>
    <mbsc-card-footer>Card footer</mbsc-card-footer>
  </mbsc-button>
</mbsc-card>

CSS:

.my-card-btn.mbsc-btn {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
  text-transform: none;
  font-weight: normal;
  text-align: left;
}

(If you’re using the css in the component’s styles and not global styles, you might need the ::ng-deep .my-card-btn.mbsc-btn selector instead, if ViewEncapsulation is enabled.)