Сверстать кнопку в письме?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста. Как правильно сверстать кнопку для письма которое открывается в стандартном Windows 10 Почтовике. А то почему-то он padding для тега игнорирует? Windows 10 Почтовик Google Chrome - G...

Comments

[Qurel]

padding нужно использовать только для ячеек таблицы td. Работает даже для Outlook 2007

Answer 1

[Полина]

Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.

Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки - просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0; background: #0382Ce; border-radius: 2px;">
  <tr>
  	<td width="19" style="width: 19px;">&nbsp;</td>
        <td style="height: 38px;">
            <a href="#" style="height: 38px; text-align: center; font-family: Arial, Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 38px; text-decoration: none; padding: 0; display: block; border-radius: 4px;">
                 <font face="Arial, sans-serif" color="#ffffff" style="font-size: 12px; line-height: 38px;">
                           <span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 12px; line-height: 38px; font-weight: bold; letter-spacing: 0.05em; -webkit-text-size-adjust:none;">ПОДРОБНОСТИ&nbsp;НА&nbsp;ПЛОЩАДКЕ</span>
                </font>
             </a>
	</td>
	 <td width="19" style="width: 19px;">&nbsp;</td>
  </tr>
</table>

Answer 2

[Qurel]

Если нужна кнопка с border-radius:
https://buttons.cm/