Animate Material设计点击<input type =“submit”/>上的动画

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中删除它。我希望你明白我的意思。

对于如此小的事情来说，这听起来太过分了。

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