如何修改给定CSS按钮代码的ripple涟漪效果，使其从右向左扩散？

这个涟漪效果是通过:active状态触发伪元素从无到有快速展开、再慢慢消失的过渡动画实现的，要改为从右往左扩散，只需调整伪元素的定位锚点和偏移参数即可，修改后的完整代码如下：

.button {
  position: relative;
  background-color: #04AA6D;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #90EE90;
  display: block;
  position: absolute;
  /* 新增定位锚点，设置为右上角 */
  right: 0;
  top: 0;
  padding-top: 300%;
  padding-left: 350%;
  /* 把原margin-left改为margin-right，匹配右侧定位 */
  margin-right: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

本次核心修改仅涉及两处参数：

• 给.button:after添加right: 0和top: 0，将涟漪的初始定位基准从默认的左上角改为右上角，确保涟漪的起点在按钮右侧
• 把原代码中.button:after的margin-left: -20px!important替换为margin-right: -20px!important，适配右侧定位的初始偏移量，保证展开方向向左

内容的提问来源于stack exchange，提问作者sandeep4o1