0

Let's take thee follwing code for example: 

<md-card>
    <md-button>Ink effect<md-button>
</md-card>

I would like it to when I click on the button to have an ink effect starting from the button and overlaying the whole card, like this:

Card + Ripple

Is it possible in AngularJS Material?

Edric
  • 24,639
  • 13
  • 81
  • 91
nokosi momo
  • 43
  • 1
  • 1
  • 5

1 Answers1

0

Updated Answer:

Based on better understanding updating my Codepen. Please check it out.

Codepen: here

Initial Answer:

Do you want something like this. You can build on top of this example if its right.

JSFiddle: here

CSS:

.card:hover{
    background-color:white !important;
 }
.card{
  box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 8px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    height:300px;
    width:500px;
    background-color:white;
 }
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • I would like something similar but with an md-card and on click the overlay covers the entire md-card. I would like to be white (but I guess for this part, only css is needed). Only the button must be clickable not the container. – nokosi momo Aug 19 '17 at 10:34