html - 动画材料设计点击动画

Question

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

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

Answer 1

你是对的，没有像:before和那样的伪元素:after可用于<input type="submit" />. 为什么<button type="submit">不适合你？

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

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

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