CSS 按钮点击颜色变化动画：从绿色到橙色再回绿

可以通过使用 CSS 动画和伪类来实现按钮被点击后颜色逐渐变化的效果。以下是一个示例代码：

#floating-divA button,
#floating-divB button {
  color: #40B40D;
  display: inline-block;
  width: 240px;
  text-align: center;
  background-color: #40B40D; /* 初始颜色为绿色 */
  transition: background-color 0.5s ease-out; /* 添加颜色变化的过渡动画 */
}

#floating-divA button:hover,
#floating-divB button:hover {
  background-color: #FFA500; /* 鼠标悬停时颜色变为橙色 */
}

#floating-divA button:active,
#floating-divB button:active {
  background-color: #40B40D; /* 按钮被点击时颜色立即变回绿色 */
  transition: none; /* 取消颜色变化的过渡动画 */
}

#floating-divA button:active::after,
#floating-divB button:active::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 165, 0, 0.5); /* 添加一个橙色半透明层 */
  animation: fade-out 1s ease-out forwards; /* 使用动画逐渐消失 */
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

这段代码中，我们首先使用 background-color 属性将按钮的初始颜色设为绿色，并添加了一个过渡动画，使颜色变化更加平滑。然后，我们使用 :hover 伪类来实现鼠标悬停时颜色变为橙色的效果。接着，我们使用 :active 伪类来实现按钮被点击时立即变回绿色，并使用 ::after 伪元素添加一个橙色半透明层，使按钮看起来被按下了一下。最后，我们使用 @keyframes 规则定义一个动画，使半透明层逐渐消失。