墨水效果扩展到容器

Question

让我们以下面的代码为例：

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

我希望当我点击按钮从按钮开始有墨水效果并覆盖整张卡片时，如this：

是否可以在AngularJS材料中使用？

Answer 1

更新答案：

基于更好地理解更新我的Codepen。请检查一下。

Codepen： here

初步答案：

你想要这样的东西吗？如果正确的话，你可以在这个例子的基础上构建。

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;
 }