절대적으로 작동하는 아름다운 방탄 이메일 버튼을 만드는 방법

게시 됨: 2021-06-11

웹 페이지가 상점이고 이메일이 상점 창이라면 클릭 유도문안(CTA) 버튼은 사람들을 끌어들이는 놀라운 창 디스플레이입니다. 내 은유가 거기에서 무너졌을 수도 있습니다.

말할 필요도 없이 CTA는 이메일에서 가장 중요한 부분 중 하나입니다. 그리고 찾기 어렵거나 사용하기 어렵거나 어떤 식으로든 망가지면 구독자는 달아날 것입니다. (도망쳐!)

하지만 걱정하지 마십시오. CTA 버튼이 구독자를 몰아가는 피에 굶주린 토끼가 아닌지 확인하기 위해 여기 있습니다. 이 블로그 게시물에서는 구독자를 위한 방탄 버튼을 만드는 방법에 대해 좀 더 자세히 알아보겠습니다.

배울 준비:

방탄버튼이란?
버튼 디자인 모범 사례
5가지 코딩 기술
- 조건부 패딩 버튼
- VML 버튼
- 패딩 버튼
- 테두리 버튼
- 패딩 + 테두리 버튼
고급 개선 사항
이메일 클라이언트 지원

방탄버튼이란?

방탄 버튼은 이미지 대신 코드로 구축된 클릭 유도문안 버튼입니다. HTML 및 CSS용으로 GIF, PNG 및 JPEG를 안정적으로 교체할 수 있습니다. 코드만 사용하면 이미지가 꺼진 상태에서도 버튼이 모든 이메일 클라이언트에 표시되므로 "방탄"이 됩니다.

또한 HTML 템플릿을 간단히 편집하여 버튼의 콘텐츠와 스타일을 업데이트할 수 있습니다. 더 이상 Photoshop과 같은 디자인 도구에서 버튼을 만들고 서버에 업로드하고 HTML을 업데이트하는 데 시간을 낭비할 필요가 없습니다.

이미지를 사용하지 마세요

이 말은 한 번 하고 다시는 말하지 않겠습니다. 진정한 방탄 버튼은 이미지뿐입니다.

*헉*

알아요. 그러나 이것이야말로 이메일 클라이언트의 100%에서 버튼이 정확히 동일하게 보이도록 보장할 수 있는 유일한 방법입니다. 우리는 이메일이 서로 다른 이메일 클라이언트, 앱 및 장치에서 얼마나 일관성이 없는지 알고 있기 때문입니다.

그럼에도 불구하고 이미지 기반 버튼을 사용해서는 안 됩니다. 이미지 차단으로 인해 이미지가 꺼지면 이미지 버튼이 사라지고 스크린 리더를 사용하는 구독자는 액세스할 수 없습니다(자세한 내용은 잠시 후).

이미지가 켜진 상태와 꺼진 상태가 있는 이미지 이메일 버튼 — *이미지가 비활성화되면 이미지 버튼의 영향이 사라짐*

CTA가 이미지에 포함되어 있으면 구독자가 메시지를 놓칠 가능성이 큽니다. 더 나쁜 것은 캠페인과 상호 작용하지 않는다는 것입니다.

이미지 기반 CTA 버튼을 사용하면 이메일의 접근성에도 영향을 미칩니다. 이미지 안에 CTA 컨텍스트를 숨기면 화면 판독기가 이를 읽지 못하여 시각 장애가 있는 구독자가 이메일에 액세스하지 못할 수 있습니다.

이제 이미지 버튼에 대해 더 많이 알게 되었으므로 내 초기 진술이 대부분 사실임을 깨달아야 합니다. 이미지 기반 버튼 은 구독자가 스크린 리더를 사용하지 않는 경우에만 이미지가 켜져 있는 모든 이메일 클라이언트 에서 동일하게 보입니다. 그래서 그들은 실제로 방탄입니까? 아니야, 그들은 그렇지 않아. 그리고 위에서 언급한 두 경우 모두 표준 이메일 추적을 사용하여 추적하는 것이 불가능하므로 구독자의 몇 퍼센트가 이러한 나쁜 경험을 하고 있는지 알 수 있는 방법이 없습니다.

따라서 이미지 CTA를 버리고 구독자가 어떤 기기를 사용하든 CTA를 보고 사용할 수 있도록 하십시오.

아름다운 단추 디자인의 자질

버튼은 단순한 코드 그 이상입니다. 버튼을 유용하고 눈길을 끌도록 만드는 데에는 몇 가지 요소가 있습니다.

버튼 모양

버튼을 버튼처럼 보이게 합니다.

우리는 모두 재미있고 독특한 버튼을 만드는 것을 좋아하지만 예상에서 너무 벗어나면 구독자가 의도를 놓치고 조치를 취하지 않는 경우가 많습니다. 예, 단어는 클릭할 수 있는 것을 말할 수 있지만 "그림은 천 마디 말의 가치가 있습니다."라고 말합니다.

표준 버튼 모양의 예

특히 사람들이 스캔하는 경우 사람들의 관심을 끌 수 있도록 표준 버튼 모양을 사용하십시오. 표준 모양은 다음과 같습니다.

둥근 모서리
사각 모서리
알약 모양
고스트 버튼
그림자 버튼

버튼으로 재미있는 일을 할 수 없다는 말은 아닙니다. Magic Spoon은 버튼에 재미있는 애니메이션 GIF를 추가하여 더 많은 관심을 끌었습니다.

애니메이션 GIF가 있는 버튼의 매직 스푼 이메일 예

버튼 크기

연간 이메일 클라이언트 시장 점유율 데이터에 따르면 가입자의 40% 이상이 모바일 장치에서 이메일을 여는 것으로 나타났습니다. 버튼이 모든 장치에서 작동하도록 디자인하는 것이 중요합니다.

버튼이 너무 작으면 모바일 장치에서 클릭하기 어려울 수 있습니다. 너무 크면 버튼이 아니라 디자인 요소처럼 보입니다.

터치스크린의 버튼 크기에 대한 연구는 여러 차례 있었지만 주로 밀리미터를 측정 단위로 사용하는 연구가 가장 많이 이루어진 것으로 보인다. 어느 것이 이상적이지 않습니다. 그러나 일부는 적절한 밀리미터 대 픽셀 비율을 만들었습니다.

모바일 장치에서 쉽게 클릭할 수 있는 버튼의 이상적인 크기는 42픽셀에서 72픽셀(약 11-19mm) 사이로 변환되었습니다. 이것은 웹에서 볼 수 있는 버튼 높이의 평균으로 보이며 여기 Litmus에서 사용하는 버튼도 이 범위에 속합니다.

최대 30mm까지 진행된 한 연구에서는 탭하여 클릭하는 정확도가 20mm에서 정체되었으므로 버튼 크기가 더 이상 큰 차이를 만들지 않는 지점이 있습니다.

버튼 공간

버튼 주위에도 충분한 공백이 있는지 확인하여 눈에 띄도록 합니다. 이렇게 하면 구독자가 올바른 버튼을 더 쉽게 클릭할 수 있습니다.

이에 대한 가장 좋은 예는 한 단락에 많은 링크가 포함된 이메일입니다. 링크를 서로 가깝게 묶으면 구독자가 특히 모바일에서 클릭하기를 원하는 항목을 정확하게 클릭하지 않을 것입니다.

시각적 피드백

모든 이메일 클라이언트가 대화형 요소를 지원하는 것은 아니지만 가능한 경우 시각적 피드백을 제공하기 위해 약간의 대화형 기능을 추가하면 구독자가 대화형 요소가 등록되었음을 알 수 있습니다.

무언가를 클릭할 수 있다는 추가 신호입니다.

이것은 색상 변경만큼 간단할 수도 있고 원하는 만큼 복잡할 수도 있습니다. (때로는 모든 것을 다 하는 것이 재미있다는 것을 알고 있으므로 주저하지 말고 자제해야 할 때를 알고 있습니다.)

우리 고유의 표준 버튼에는 푸시 버튼 효과뿐만 아니라 색상 변경이 있습니다.

푸시 버튼 효과의 이메일 예

그러나 우리도 새로운 것을 시도했고 1월 뉴스레터 버튼으로 많은 즐거움을 얻었습니다. "밀어내는" 재미도 있는 훌륭한 디자인 요소입니다.

버튼에 대한 시각적 피드백의 리트머스 이메일 예

버튼 텍스트

실제 CTA 사본 또는 레이블을 실행 가능하고 요점에 맞게 유지하십시오. 구독자에게 가능한 한 명확하고 간결하게 원하는 내용을 전달하세요.

일반적으로 1~5단어면 충분합니다.

이 길이는 또한 이메일을 스캔할 수 있게 해줍니다. 그리고 더 할말이 있다면? 버튼 위의 헤드라인에 포함합니다. 정기적으로 CTA를 1~5단어 이내로 유지함으로써, 당신이 그것을 지나치는 드문 순간을 훨씬 더 의미 있는 방식으로 눈에 띄게 만듭니다.

방탄 버튼을 코딩하는 5가지 방법

300,000개 이상의 잠재적인 이메일 렌더링을 통해 어디서나 작동하는 만능 버튼을 만들 수 없다는 것이 정말 놀랍습니까?

당신이 할 수 있는 일은 거의 모든 곳에서 작동하는 버튼을 만드는 것입니다. 필요에 따라 이러한 버튼을 만드는 몇 가지 다른 방법이 있습니다. 구독자를 지원하는 데 가장 효과적인 방법을 알아보려면 이 항목을 살펴보세요.

1. 조건부 패딩 버튼

이 조건부 패딩 버튼에 대해 Mark Robbins에게 감사드립니다. 그것은 우리가 여기 Litmus에서 사용하는 것입니다.

조건부 버튼

이 단추는 링크의 스타일을 사용하여 Outlook을 제외한 모든 사용자에 대해 스타일을 지정합니다. 그런 다음 조건부 코드를 사용하여 Outlook 관련 패딩을 추가합니다. Outlook 패딩은 별도로 제어되므로 다른 이메일 클라이언트에서 단추 모양에 영향을 주지 않고 Outlook 패딩을 편집할 수 있습니다.

<a href="https://www.litmus.com/" style="background-color: #1F7F4C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; color: #ffffff; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
	<![endif]-->
	<span style="mso-text-raise: 15pt;">I am a button &rarr;</span>
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
	<![endif]-->
</a>

효과가 있었나요?

부러진 모습은 좋지 않습니다. Litmus Email Previews를 사용하여 90개 이상의 이메일 클라이언트, 앱 및 장치에서 버튼이 어떻게 보이는지 테스트하십시오. 그리고 항상 브랜드에 맞는 오류 없는 이메일을 만드십시오.

더 알아보기 →

조건부 패딩 버튼의 장단점

장점:

대부분의 이메일 클라이언트에는 훌륭한 지원이 있습니다(아래 표 참조).
전체 버튼 자체를 클릭할 수 있습니다.

단점:

Outlook에서 패딩을 정확하게 얻으려면 조건부 코드를 가지고 놀아야 합니다.
Outlook 버전은 상관없이 모서리가 사각형입니다.

2. VML 기반 버튼

방탄 버튼에 대한 전통적인 접근 방식은 Campaign Monitor의 개발자인 Stig에 의해 대중화되었습니다.

VM 버튼

이 접근 방식은 링크 자체의 스타일을 사용하여 대부분의 이메일 클라이언트에 대한 버튼을 구성하고 스타일을 지정합니다. 구조는 line-height 및 width 속성을 통해 제공됩니다.

Microsoft Outlook의 대체 수단으로 VML(Vector Markup Language)이 Outlook 관련 조건부 주석 내에서 사용됩니다. VML은 Outlook의 링크 주위에 상자를 만든 다음 앵커 태그의 스타일을 지정하여 다른 모든 사용자를 위한 단추 디자인을 만듭니다.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://litmus.com" style="background-color:#1F7F4C;border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>

이 버튼의 더 복잡한 버전의 경우 실제로 두 가지 버전의 버튼을 만들 수 있습니다. 하나는 VML용이고 다른 하나는 다른 모든 버전용입니다.

VML 기반 버튼의 장단점

장점:

대부분의 이메일 클라이언트에는 훌륭한 지원이 있습니다(아래 표 참조).
전체 버튼 자체를 클릭할 수 있습니다.
둥근 모서리는 Outlook에서 유지됩니다.

단점:

이는 Microsoft Office 제품군의 독점적인 익숙하지 않은 언어인 VML의 사용에 의존하므로 새로운 방탄 버튼을 만들고 기존 버튼을 업데이트하는 데 시간이 많이 걸리고 답답합니다.
방탄 버튼의 너비와 높이를 선언해야 하므로 CTA 사본을 변경하려면 버튼 크기도 변경해야 합니다.
더 복잡한 버전의 VML 버튼에는 변경해야 하는 두 개의 URL이 필요합니다. 그리고 일부 ESP는 VML 섹션의 URL을 추적하지 않습니다.
VML에는 고정된 높이와 너비가 필요하므로 CTA의 사본 길이가 다를 수 있는 템플릿에서는 이 버튼이 제대로 작동하지 않습니다.

VML의 모든 것을 배우고 싶지 않다면(솔직히 누가 합니까?), Campaign Monitor에는 기존의 방탄 버튼을 만들기 위한 무료 온라인 도구가 있습니다. Buttons.cm를 사용하면 대부분의 이메일 클라이언트에서 멋지게 보이고 잘 작동하는 새로운 CTA 버튼을 쉽게 만들 수 있습니다.

이것은 제가 제약 이메일 작업을 할 때 버튼을 코딩할 때 주로 사용하는 스타일이었습니다. 가장 큰 장점은 고도로 규제되는 산업에 필요한 Outlook의 둥근 모서리를 유지할 수 있다는 것입니다.

3. 패딩 기반 버튼

패딩 버튼

이 메서드는 버튼에 간단한 HTML 테이블을 사용합니다. 버튼을 구성하기 위해 테이블 셀 수준의 패딩에 의존하고 버튼의 스타일을 지정하는 HTML 속성 및 CSS에 의존합니다.

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #1F7F4C;" align="center">
            <a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

패딩 기반 버튼의 장단점

장점:

대부분의 이메일 클라이언트에서 잘 작동합니다(아래 표 참조).
이메일 디자이너에게 익숙한 코드(HTML 및 CSS)를 사용하므로 새로운 방탄 버튼을 만들고 기존 버튼을 쉽게 업데이트할 수 있습니다.

단점:

전체 버튼을 클릭할 수 없으므로 버튼을 클릭하거나 탭했다고 생각하는 구독자와 마찰이 발생할 수 있습니다.
Outlook은 둥근 모서리를 지원하지 않습니다.

4. 테두리 기반 버튼

테두리 버튼

테두리 기반 버튼은 이전 방법과 유사한 접근 방식을 취합니다. 간단한 HTML과 CSS를 사용하여 클릭 유도문안을 구성하고 스타일을 지정할 수 있습니다. 그러나 구조를 위해 테이블 셀 수준의 패딩에 의존하는 대신 링크 자체에 두꺼운 테두리를 추가하여 CTA를 구축하십시오.

<a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; border-radius: 5px; background-color: #1F7F4C; border-top: 12px solid #1F7F4C; border-bottom: 12px solid #1F7F4C; border-right: 18px solid #1F7F4C; border-left: 18px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>

링크 태그는 블록 수준 요소로 설정되고 테두리는 "패딩"을 제공하는 데 사용됩니다. 이렇게 하면 이전 데스크톱 클라이언트에서도 전체 버튼을 가리키고 클릭할 수 있습니다.

테두리 기반 버튼의 장단점

장점:

모든 스타일은 코드를 단순화하는 실제 링크 태그에 있습니다.
하나의 버튼만 사용됩니다. 이중 버튼이나 혼란스러운 VML 코드가 필요하지 않습니다.
특정 높이 또는 너비 정의가 필요하지 않으므로 버튼의 확장성을 높일 수 있습니다.

단점:

Outlook은 테두리 크기를 약간 줄입니다.
Outlook은 <a> 태그를 블록 수준 요소로 인식하지 않습니다.
Outlook은 둥근 모서리를 지원하지 않습니다.
정확한 링크 요소에 추가 테두리와 같은 고급 스타일을 추가하는 기능은 없습니다.

5. 패딩 및 테두리 기반 버튼

패딩 및 테두리 기반 버튼은 이전 두 접근 방식의 요소를 결합합니다.

패딩 및 테두리 이메일 버튼

기본적으로 이 접근 방식은 패딩과 최소한 1px 테두리가 있는 링크 스타일을 지정하는 동일한 구조를 사용합니다. 그런 다음 <td>에 배경색을 적용하여 링크의 전체 배경을 채웁니다. Outlook이 <a> 태그의 수평 패딩을 인식하지 못하기 때문에 이 경우 <a> 대신 <td>에 배경색을 적용해야 합니다(블록 수준이 아닌 HTML에 대한 이러한 스타일 지정을 지원하지 않기 때문에). 집단).

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" style="border-radius: 5px; background-color: #1F7F4C;">
            <a href="https://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none;border-radius: 5px; padding: 12px 18px; border: 1px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

패딩 및 테두리 버튼의 장단점

장점:

하나의 버튼만 코딩하면 되므로 이 기술을 사용하는 버튼을 쉽게 업데이트할 수 있습니다.
버튼의 특정 치수는 필요하지 않습니다.
이 방법으로 배경 이미지를 지원할 수 있습니다.

단점:

스타일은 <td>와 <a>로 구분되므로 버튼의 스타일이 변경되면 둘 다 업데이트해야 합니다.
Outlook은 둥근 모서리를 지원하지 않습니다.

시맨틱 HTML은 어떻습니까?

우리는 시맨틱 html을 사용하는 것을 좋아하지만 불행히도 <button> 태그는 이메일에서 지원되지 않습니다. 대부분의 이메일 클라이언트에서는 클릭할 수 없거나 올바르게 렌더링되지 않는 <div>로 축소됩니다.

앵커 태그 안에 div 또는 테이블을 중첩할 수 있습니다. 그러나 의미상 올바르지 않습니다. 또한 이 두 가지 방법 모두 Outlook에서 작동하지 않는 단추를 생성합니다. 테이블의 경우 링크를 클릭할 수 없으며 div의 경우... 글쎄, 직접 참조하십시오.

div 버튼	Outlook의 Div 버튼

고급 해킹 및 개선 사항

위의 모든 방법은 방탄 버튼을 만드는 훌륭한 출발점이지만 각 기술을 더 수정하여 더 나은 방탄 버튼을 만들 수 있습니다.

Outlook용 수평 패딩 해킹

Outlook은 가로 여백을 지원하지 않으므로 CTA 텍스트가 방탄 단추의 왼쪽 및 오른쪽 가장자리에 매우 가깝게 표시될 수 있습니다.

Outlook의 수평 "패딩"을 늘리는 데 사용할 수 있는 빠른 해킹은 링크의 양쪽에 줄바꿈되지 않는 인라인 공백을 조건부로 추가하는 것입니다. 조건부 패딩 버튼은 이미 이것을 문자 간격 속성과 함께 사용하여 버튼 측면에 공간을 추가합니다.

<!--[if mso]>&nbsp;<![endif]-->

미디어 쿼리를 통한 점진적 개선

방탄 버튼의 디자인을 개선하기 위해 테두리, 그라디언트, 웹 글꼴, 호버 효과 등과 같은 고급 스타일을 미디어 쿼리와 함께 사용할 수 있습니다.

표준 이메일 버튼과 점진적으로 강화된 버튼

VML을 통한 Outlook 개선 사항

버튼을 정말 빛나게 만들고 싶다면 VML로 뛰어들어 버튼에 약간의 재미를 더할 수 있습니다.

VML은 실망스러울 수 있지만 배경 이미지와 그라디언트, 그림자를 사용하여 매우 재미있는 버튼을 만들 수 있습니다. 어느 정도 시행착오가 있지만 결과는 놀랍습니다.

예를 들어 1월 뉴스레터의 버튼을 확인하세요.

재미있는 VML 버튼이 있는 이메일 예시 — *VML을 사용하여 Outlook에 단추 그림자를 추가하여 다른 이메일 클라이언트의 그림자와 일치시키기*

그렇다면 이메일 클라이언트 지원은 어떤가요?

이메일 클라이언트는 이 게시물이 2017년에 처음 작성된 이후 지원을 업데이트했기 때문에 이 버튼은 방탄에 매우 가깝습니다. 예상대로 Outlook에는 최소한의 지원이 있지만 거기에서도 단추가 크게 손상되지는 않습니다.

여기에서 전체 리트머스 테스트를 확인할 수 있습니다.

이메일 클라이언트	가정 어구	VML	심	국경	패딩 + 테두리
애플 메일
로터스 노트	✘	✘
IBM 노트 10	✘	✘
전망 2007-2016	*		*	*†	*
Mac용 Outlook
Office365(데스크톱)	*		*	*†	*
지메일
AOL
야후
아웃룩 365(웹메일)
아웃룩닷컴
Mail.ru
GMX.de	*		*	*	*
T-온라인.de	†
Web.de	*		*	*	*
지메일 앱 (기계적 인조 인간)
지메일 앱(iOS)
아이폰/아이패드
삼성 메일
아웃룩(안드로이드)
아웃룩(iOS)
다크 모드
애플 메일
지메일 앱
아이폰/아이패드
오피스 365 (데스크톱)		✘
아웃룩닷컴

* 둥근 모서리는 렌더링되지 않습니다. † 버튼 크기가 왜곡됩니다.

다크 모드 지원 및 해킹

다크 모드는 방탄 버튼에 흥미로운 반전을 선사합니다. 대부분의 HTML 및 CSS와 마찬가지로 미디어 쿼리가 있는 버튼의 다크 모드 스타일을 제어할 수 있습니다.

그러나 Gmail 및 Outlook.com은 버튼 색상을 반전할 수 있습니다.

버튼의 배경색을 유지하려면 몇 가지 방법이 있습니다. 그러나 버튼의 사본 색상을 반전시키는 것에 주의하십시오. Outlook에서 글꼴 색상이 전환되는 것을 막을 방법은 없지만 Remi Parmentier의 CSS 혼합 해결 방법을 사용하여 버튼의 흰색 텍스트를 흰색으로 유지할 수 있습니다.

이러한 방탄 버튼 옵션의 가장 큰 지원 부족은 VML 버튼입니다.

다크 모드에서 Office 365는 배경색을 반전시키지만 VML의 채우기 색은 반전 시키지 않습니다 . 따라서 다음과 같은 버튼이 생깁니다.

다크 모드의 VML 버튼

이에 대한 수정 사항이 있습니다. 다음과 같이 버튼에 대한 <a> 태그의 배경색에 RGBA 값을 사용해야 합니다.

<div>
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a href="http://litmus.com" style="background-color:rgba(31, 127, 76,1);border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</div>

따라서 대신 다음과 같은 버튼이 생깁니다(훨씬 더 낫죠?):

다크 모드가 수정된 VML 이메일 버튼

배경색으로 RGBA 값은 Outlook에서 지원되지 않으므로 VML 색상으로 대체됩니다. 이 수정에 대해 Wilbert Heinen에게 감사드립니다! Outlook의 어두운 모드에서는 글꼴 색상을 제어할 수 없으므로 이 버튼을 사용하려는 경우 글꼴 색상이 반전될 때 색상 선택이 접근성을 고려하는지 확인하십시오. (우리가 사용한 예는 어떤 색상을 사용하지 말아야 하는지에 대한 좋은 예입니다.)

귀하의 캠페인은 방탄입니까?

어떤 접근 방식을 취하든, 클릭 유도문안을 위해 방탄 버튼을 사용하는 것이 이미지에 의존하는 것보다 훨씬 뛰어납니다. 이미지를 차단하는 이메일 클라이언트에서도 방탄 버튼을 사용하면 메시지가 청중에게 명확하게 전달되어 구독자가 참여할 가능성이 높아집니다. 깨진 이메일은 이제 그만!

Litmus를 사용하여 브랜드에 오류 없는 이메일 생성

깨진 이메일(특히 CTA 버튼)은 클릭과 전환이 적다는 것을 의미합니다. 아야. Litmus는 이미지 차단, 끊어진 링크 등에 대한 자동 검사를 통해 모든 것이 완벽하도록 도와줍니다.

무료 평가판 시작 →

가장 좋아하는 방탄 버튼 기술은 무엇입니까?

아래 의견에서 방탄 이메일 버튼을 만드는 방법을 알려주십시오.

Jason Rodriguez가 2017년 11월 1일에 원래 게시했습니다. 2021년 6월 22일에 마지막으로 업데이트되었습니다.