带CSS转换的颤抖文本

我试着用一个按钮在悬停时产生涟漪效应，唯一的问题是当我悬停在上面时，文本会抖动/嘎嘎声/颤抖，我希望它保持静止，以便平稳过渡。有没有办法阻止这一切

a{
显示：块；
位置：相对位置；
宽度：300px；
高度：50px；
背景：rgba（0,025,2）；
文字装饰：无；
文本对齐：居中；
溢出：隐藏；
利润率：10%自动；
}
P
跨度：第一种类型，
span：类型的最后一个{
位置：绝对位置；
保证金：0；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：0；
身高：0；
边界半径：50%；
过渡：全部3秒；
}
跨度：第一种类型{
转换延迟：.1s；
z指数：1；
}
span：类型的最后一个{
转换延迟：.2s；
z指数：2；
}
span.cta{
颜色：#33C；
文本转换：大写；
字体系列：Arial；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
显示：块；
过渡：颜色。3s；
z指数：3；
}
a:悬停p，
a：悬停跨度：第一种类型，
a:悬停范围：类型的最后一个{
宽度：110%；
身高：660%；
边界半径：50%；
背景：rgba（0,025,2）；
}
a：悬停跨度：第一种类型，
a:悬停范围：类型的最后一个{
宽度：100%；
身高：100%；
}
a:悬停p档{
颜色：#FFF；
}

---

现在开始…修改HTML[在div中添加按钮文本并将新类“textCta”应用到它]

---

通过删除p标记并将实际文本放在div中，我成功地停止了颤抖，并保持了相同的背景效果

感谢诺菲的帮助

<a href="#">
    <span></span>
    <div class="cta">Shop the Trend</div>
    <span></span>
</a>

---

为什么不使用类似物化ECSS的东西？

.textCta {
    color:#33C;
    text-transform:uppercase;
    font-family:Arial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    display: block;
    transition: color .3s;
    z-index: 3;
}

<a href="#">
    <span></span>
    <div class="cta">Shop the Trend</div>
    <span></span>
</a>