---
url: "/ko/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 미리보기 기능으로 [호버 상태를 미리 볼](/ko/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 미리보기 기능으로 [호버 상태를 미리 볼](/ko/emailify/design/preview) 수 있어요.

> **Warning:** **호버 스타일은 모든 곳에서 지원되지는 않아요**. 현재 [이메일 클라이언트의 호버 스타일 지원](https://www.caniemail.com/features/css-pseudo-class-hover/)은 아직 비교적 낮은 편이에요. 이 점을 알아 두고 호버 스타일의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요. 이메일 클라이언트가 호버 스타일을 지원하지 않으면, 사용자가 버튼에 마우스를 올려도 버튼은 평소 상태와 똑같이 보여요.