在 <input type="submit"> 上制作 Material Design 点击动画

【问题标题】：Animate Material design click animation on <input type="submit">在 <input type="submit"> 上制作 Material Design 点击动画
【发布时间】：2015-01-30 01:37:00
【问题描述】：

我需要创建一个按钮来模拟其中一些行为：https://fezvrasta.github.io/bootstrap-material-design/#button

但不是<button> 标记，而是<input type="submit"> 标记。但是，这个没有任何 :before 或 :after 元素。我将如何实施？

【问题讨论】：

对不起，但是....我没有看到任何:before 或:after 附加到按钮的伪元素...您确定这实际上是使用的技术吗？

标签： html css material-design bootstrap-material-design

【解决方案1】：

你说得对，<input type="submit" /> 没有像 :before 和 :after 这样的伪元素。为什么<button type="submit"> 不适合你？

目前我能想到的唯一方法是使用 Javascript。如果单击按钮，您可以创建一个新元素，附加相同大小的按钮并将其放置在其顶部。插入与输入标签相同的文本。在这个新创建的元素中，您可以放置圆形物体并为其设置动画。一旦动画停止，您可以再次将其从 DOM 中删除。我希望你明白我的意思。

对于这么小的事情来说，这听起来工作量太大了。

// 编辑：如果您想尝试我的建议，您需要确保在新元素内复制的文本位于气泡/圆形动画的上方。

【讨论】：