---
url: "/ja/emailify/design/hover.md"
description: "ボタンとリンクにホバー状態を追加します。対応状況の注意点とプレビューについても説明します。"
---

# ホバー状態を追加する

> ボタンとリンクにホバー状態を追加します。対応状況の注意点とプレビューについても説明します。

> **Warning:** **ホバースタイルはすべての環境で対応しているわけではありません。** 現時点では、[メールクライアントにおけるホバースタイルへの対応](https://www.caniemail.com/features/css-pseudo-class-hover/)はまだ比較的少ないため、この点に注意し、ホバースタイルを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。メールクライアントがホバースタイルに対応していない場合、ユーザーがボタンにカーソルを合わせても、ボタンのホバー状態は通常の状態と同じ見た目にフォールバックするだけです。

### 動画チュートリアル：FigmaからエクスポートするHTMLメールのボタンにホバー効果を追加する

この動画では、EmailifyのFigmaプラグインを使って、FigmaからエクスポートするHTMLメールのボタンにホバー効果を追加する方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/8pydrphK6bU)

[Video](/assets/videos/emailify/design/button-hover-state.mp4)

Emailifyの「🔗 Button」レイヤーには、ホバー状態を適用できます。**Settings**パネルを開いた状態でレイヤーを選択し、**Button Hover State**エリアで、ホバー時に選択したボタンレイヤーへ適用したい16進数のカラー値を入力するか、アニメーションのトランジションのオプションを選択します（両方も可）。

次のプロパティの一部またはすべてを設定できます。

- Background Color
- Text Color
- Transition

プラグインのHTMLプレビュー機能を使って、[ホバー状態をプレビュー](/ja/emailify/design/preview)できます。

## テキストリンクとナビゲーションリンクにホバー状態を追加する {#adding-hover-states-to-text-and-navigation-links}

### 動画チュートリアル：FigmaからエクスポートするHTMLメールのテキストリンクにホバー時の色を追加する

この動画では、EmailifyのFigmaプラグインを使って、FigmaからエクスポートするHTMLメールのテキストリンクにホバー時の色を追加する方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/T-HSfOhTTTw)

[Video](/assets/videos/emailify/design/link-hover-color.mp4)

Emailifyの「✍️ Text」や「🍔 Navigation」レイヤーには、ホバー状態を適用できます。**Settings**パネルを開いた状態でレイヤーを選択し、**Links Hover State**エリアで、ホバー時に選択したレイヤー内のテキストリンクへ適用したい16進数のカラー値を入力します。

必要に応じて**Fade Transition**トグルを有効にすることもできます。有効にすると、ホバー時のリンクのテキスト色の変化に、ゆるやかな色のトランジションが加わります。

プラグインのHTMLプレビュー機能を使って、[ホバー状態をプレビュー](/ja/emailify/design/preview)できます。

> **Warning:** **ホバースタイルはすべての環境で対応しているわけではありません。** 現時点では、[メールクライアントにおけるホバースタイルへの対応](https://www.caniemail.com/features/css-pseudo-class-hover/)はまだ比較的少ないため、この点に注意し、ホバースタイルを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。メールクライアントがホバースタイルに対応していない場合、ユーザーがボタンにカーソルを合わせても、ボタンのホバー状態は通常の状態と同じ見た目にフォールバックするだけです。