# 按钮点击动画

URL: https://caijiao.org/animejs/5-cases/1-button
Source: docs/animejs/5-cases/1-button.md
Description: 本节讲解如何使用 Anime.js 为按钮添加点击反馈动画，包括缩放、回弹、颜色变化等常见交互效果，提升用户体验。

在交互设计中，为按钮添加点击反馈动画可以显著提升用户体验。Anime.js 可以轻松实现点击缩放、颜色闪动等效果，增强页面的动感。

## 缩放反馈动画

以下是一个简单的按钮点击缩放+回弹效果示例：

```js
document.querySelector(".btn").addEventListener("click", function () {
  anime({
    targets: this,
    scale: [
      { value: 0.9, duration: 100 },
      { value: 1.0, duration: 300 },
    ],
    easing: "easeOutElastic(1, .5)",
  });
});
```

## 小结

通过结合点击事件和动画效果，可以让按钮更具“点击感”，在细节中提升产品品质。

## 示例演示

[在线代码演示](/animejs/demos/11.html)