호버 스타일은 모든 곳에서 지원되지는 않아요. 현재 이메일 클라이언트의 호버 스타일 지원은 아직 비교적 낮은 편이에요. 이 점을 알아 두고 호버 스타일의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요. 이메일 클라이언트가 호버 스타일을 지원하지 않으면, 사용자가 버튼에 마우스를 올려도 버튼은 평소 상태와 똑같이 보여요.

영상 튜토리얼: Figma에서 만든 HTML 이메일의 버튼에 호버 효과 추가하기(영어)

이 영상은 Emailify Figma 플러그인으로 Figma에서 만든 HTML 이메일의 버튼에 호버 효과를 추가하는 방법을 보여 줘요.

Emailify의 “🔗 Button” 레이어에는 호버 상태를 적용할 수 있어요. Settings 패널이 열린 상태에서 레이어를 선택한 다음, Button Hover State 영역에서 마우스를 올렸을 때 선택한 버튼 레이어에 적용할 16진수 색상 값을 입력하거나 애니메이션 전환 옵션을 고르세요. 둘 다 설정해도 돼요.

다음 속성 중 원하는 것을 일부 또는 모두 설정할 수 있어요.

• Background Color
• Text Color
• Transition

플러그인의 HTML 미리보기 기능으로 호버 상태를 미리 볼 수 있어요.

텍스트와 내비게이션 링크에 호버 상태 추가하기

영상 튜토리얼: Figma에서 만든 HTML 이메일의 텍스트 링크에 호버 색상 추가하기(영어)

이 영상은 Emailify Figma 플러그인으로 Figma에서 만든 HTML 이메일의 텍스트 링크에 호버 색상을 추가하는 방법을 보여 줘요.

Emailify의 “✍️ Text” 또는 “🍔 Navigation” 레이어에는 호버 상태를 적용할 수 있어요. Settings 패널이 열린 상태에서 레이어를 선택한 다음, Links Hover State 영역에서 마우스를 올렸을 때 선택한 레이어의 텍스트 링크에 적용할 16진수 색상 값을 입력하세요.

원하면 Fade Transition 토글을 켤 수도 있어요. 마우스를 올렸을 때 링크 텍스트 색상이 바뀌면서 살짝 전환 효과가 생겨요.

플러그인의 HTML 미리보기 기능으로 호버 상태를 미리 볼 수 있어요.

호버 스타일은 모든 곳에서 지원되지는 않아요. 현재 이메일 클라이언트의 호버 스타일 지원은 아직 비교적 낮은 편이에요. 이 점을 알아 두고 호버 스타일의 “점진적 향상”을 염두에 두고 이메일을 디자인해 보세요. 이메일 클라이언트가 호버 스타일을 지원하지 않으면, 사용자가 버튼에 마우스를 올려도 버튼은 평소 상태와 똑같이 보여요.