# ボタンの光沢スイープのCSSアニメーション実装

> ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。

- カテゴリ: ホバー
- URL: https://www.css-dictionary.com/animations/hover-shine/

## HTML

```html
<button class="shine">ホバーで光る</button>
```

## CSS

```css
.shine {
  position: relative;
  overflow: hidden;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  background: #3c5c88;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.shine::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgb(255 255 255 / 0.5) 50%,
    transparent 60%
  );
  translate: -100% 0;
  transition: translate 0.5s ease;
}

.shine:hover::before {
  translate: 100% 0;
}
```

## 仕組みの解説

光の帯は::before擬似要素に描いた透明→白→透明のグラデーションです。初期状態でtranslate: -100% 0（左外側）に待機させ、ホバーで100%（右外側）まで移動させることで「通過」を表現します。親のoverflow: hiddenで帯がボタンの外に見えないように切り抜くのがポイントです。

## 実装のポイント

帯の角度（105deg）や透明度を変えるだけで印象が大きく変わります。金属的にしたいなら白の透明度を上げて幅を狭く。

## 使っているプロパティ

- [linear-gradient](https://www.css-dictionary.com/property/linear-gradient.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [pseudo-hover](https://www.css-dictionary.com/property/pseudo-hover.md)