纯css给elementui设置一个点击按钮动画，动画只在按钮内部生效，动画效果为从中间向外扩散圆，并更改颜色，按钮点击后要完整播放完这段动画

可以使用伪元素和CSS动画来实现这个效果。以下是一个示例代码：

HTML代码：

<el-button class="animated-button">点击我</el-button>

CSS代码：

.animated-button {
  position: relative;
  overflow: hidden;
}

.animated-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #409EFF;
  opacity: 0.5;
  transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

.animated-button:hover::before {
  width: 200%;
  height: 200%;
  opacity: 0;
}

.animated-button:active::before {
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: none;
}

解释：

- `.animated-button` 类设置了 `position: relative` 和 `overflow: hidden`，以便让后面的伪元素在按钮内部显示，并且超出按钮的部分被隐藏。
- `.animated-button::before` 选择器用来创建伪元素，这个伪元素将用来实现从中间向外扩散圆的效果。
- `content: ''` 表示伪元素没有内容。
- `position: absolute`、`top: 50%` 和 `left: 50%` 用来将伪元素放置在按钮的中心位置。
- `transform: translate(-50%, -50%)` 用来将伪元素向左上角移动，使其完全覆盖按钮。
- `width: 0` 和 `height: 0` 用来设置伪元素的初始大小为 0。
- `border-radius: 50%` 用来将伪元素变成一个圆形。
- `background-color: #409EFF` 用来设置伪元素的背景颜色。
- `opacity: 0.5` 用来设置伪元素的初始透明度为 0.5。
- `transition` 属性用来设置伪元素的动画效果，包括宽度、高度和透明度的变化。
- `.animated-button:hover::before` 选择器用来设置当鼠标悬停在按钮上时的动画效果。
- `.animated-button:active::before` 选择器用来设置当按钮被点击时的动画效果，包括宽度、高度和透明度的变化，但是这个动画不需要过渡效果，所以需要将 `transition` 属性设置为 `none`。

这段代码可以实现一个简单的点击按钮动画，效果如下图所示：