Jquery CSS动画关键帧不以内容为中心

我有以下按钮：

$（文档）.ready（函数（）{
$（'.sm hover-ripple'）.hover（函数（）{
变量$this=$（this），
$content=$this.html（），
$height=$this.css（'height'）。replace（'px'，''），
$width=$this.css（'width'）。replace（'px'，''），
$padding_top=$this.css（'padding-top'）。replace（'px'，''），
$padding_left=$this.css（'padding-left'）。replace（'px'，''），
$padding_bottom=$this.css（'padding-bottom'）。替换（'px'，''），
$padding_right=$this.css（'padding-right'）。replace（'px'，''），
$background=$this.css（'background'）；
var$html=''+
'' +
'' +
“+$content+”+
'' +
'';
$this.html（“”+$content+“”）；
},
函数（）{
变量$this=$（this），
$content=$this.find（'.sm圆圈悬停'）.html（）；
$this.html（$content）；
});
});
.sm升起按钮{
颜色：#fff；
背景：2196F3；
边界：无；
最小宽度：64p；
高度：36px；
线高：36px；
填充：0 16px；
利润率：8px；
文字装饰：无；
显示：内联块；
文本对齐：居中；
光标：指针；
大纲：无；
}
.sm按钮填充器{
背景：rgba（00,00,00,12）；
填充：0.5%；
溢出：隐藏；
过渡：填充300毫秒，易于输入输出；
动画：脉冲填充3000毫秒无限；
@-关键帧脉冲填充{
0% {
填充：0 0px；
}
25% {
填充：0 10px；
}
50% {
填充：0 5px；
}
75% {
填充：0 10px；
}
100% {
填充：0 0px；
}
}
}
.sm圆圈悬停{
过渡：宽度300ms，易于进出；
}

悬停涟漪（Hover ripple）
我不明白为什么这会如此复杂，而您几乎可以使用普通的
CSS
：


a{
显示：内联块；
背景：url（'data:image/svg+xml；utf8'，）不重复50%50%橙色；
背景大小：0；
过渡：背景大小。5s，背景颜色。7s；
填充：30px；
}
a:悬停{
背景尺寸：100%自动；
背景色：红色；
}
终于找到了适合我的东西。必须使用
：before
和
：after
来获得我想要的结果


.sm悬停涟漪{
z指数：1；
溢出：隐藏；
位置：相对位置；
}
.sm悬停涟漪：悬停：之后
动画：节拍3秒轻松进出无限；
@-关键帧节拍{
0%, 50%, 100% {
变换：缩放（1）平移（0）；
}
25%, 75% {
变换：缩放（.95）平移Z（0）；
}
}
.sm悬停涟漪：之前{
背景：rgba（00,00,00,12）；
内容：“；
身高：100%；
宽度：150%；
位置：绝对位置；
z指数：-2；
利润率：0px-50%；
}
.sm悬停涟漪：之后{
内容：“；
宽度：90%；
身高：0；
垫面：85%；
对象匹配：包含；
背景：蓝色；
位置：绝对位置；
最高：100%；
左：50%；
利润率：-45%；
不透明度：1；
边界半径：50%；
变换：缩放（0）平移（0））；
转换：所有.2易入易出；
z指数：-1；
}
.sm升起按钮{
颜色：白色；
背景：蓝色；
边界：无；
最小宽度：64px；
高度：36px；
线高：36px；
填充：0 16px；
利润率：8px；
文字装饰：无；
显示：内联块；
文本对齐：居中；
光标：指针；
大纲：无；
}
悬停涟漪
哇这看起来很复杂，效果很简单。为什么不简单地做几乎所有事情都是
CSS
，链接是
a
元素，扩展的圆圈是，例如，在
或
背景图像：url（数据：image/svg+xml）之后的
？在这里查看此演示--@Tasos这不是我想要的行为for@SuperDJ请说明在这种情况下您需要什么，因为有两个人给了你建议，而我们得到的只是
而不是我要找的
-我不知道你怎么希望我们理解你在这种情况下要找的东西。所以你是说发布的答案和链接是不相关的，因为它们与不同的事件有关？我下面的答案将解决您的填充问题，您只需要将它与一些类绑定在一起，并在Javascript中轻松切换类。问题解决了，实施还是由你决定的，而不是我所看到的行为for@SuperDJ你在寻找什么样的行为，因为问题根本不清楚，我的实现与你在材料设计文档中给出的示例没有什么不同。如果您的意思是“它需要一个焦点、禁用和按下的样式”，那么可以将上述内容作为实现它的一种方式，并用类切换器替换JS。