墨水效果扩展到容器答案

【问题标题】：Ink effect extended to a container墨水效果扩展到容器
【发布时间】：2018-01-27 21:31:35
【问题描述】：

让我们以以下代码为例：

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

当我单击按钮时，我希望它具有从按钮开始并覆盖整个卡片的墨水效果，例如this：

在 AngularJS Material 中可以吗？

【问题讨论】：

标签： angularjs angular-material md-card

【解决方案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;
 }

【讨论】：

我想要类似的东西，但带有 md 卡，点击时覆盖覆盖整个 md 卡。我想成为白人（但我想这部分只需要 css）。只有按钮必须是可点击的，而不是容器。