Những thẻ html được hỗi trợ trong gmail

Claim yours!

Chúng ta đã thêm một button ở đây với lớp 'buttonwrapper'. Nó chứa một ô có padding với một nền được thiết lập màu sắc, và sau đó một liên kết văn bản bên trong. Tôi thích sử dụng phương pháp này vì nó cho phép bạn có các button có chiều rộng không cố định, điều mà rất hữu ích khi tạo template có thể tái sử dụng, nơi chiều rộng của mỗi button sẽ khác nhau mỗi khi nó được sử dụng. Nếu bạn có một chiều rộng cố định cho các button, bạn có thể cần sử dụng Bulletproof Button Generator tại Campaign Monitor.

Các phong cách của chúng ta cho button:

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}

Cũng như chiều rộng thiết lập của chúng ta cho lớp mới này 'col380', chúng ta sẽ thêm kích thước của chúng ta vào danh sách các phong cách để xử lý Apple Mail. Nó bây giờ trông như thế này:

@media only screen and [min-device-width: 601px] {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}

Chúng ta sẽ thêm phong cách cần thiết cho footer của chúng ta với CSS:

.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}

Tối ưu hóa Button cho Mobile

Trên di động, thật lý tưởng nếu toàn bộ button là một liên kết, không chỉ là văn bản, vì rất khó để nhấp vào một liên kết văn bản nhỏ với ngón tay của bạn. Bởi vì nó không có khả năng giống như trên máy tính để bàn [padding không được hỗ trợ đầy đủ trên thẻ Unsubscribe from this newsletter instantly

và thêm CSS sau đây vào Media Queries:

body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}

body[yahoo] .hide {display: none!important;}

Bạn cũng có thể chọn lớp .innerpadding, .header và .footer để giảm padding trên các client mà hỗ trợ Media Queries.