Я пытался заставить кнопку выглядеть определенным образом в шаблоне электронной почты, но у меня возникли проблемы с шириной тега a в старом Outlook (версия 2405).
Я хочу, чтобы элемент a заполнял элемент td, чтобы все красное пространство было кликабельным.
tdaa не заполняет ширину элемента td.span не белый, а стандартный цвет ссылки. Это приводит к изменению цвета при нажатииВот мой код:
<table>
<tr>
<td align = "center" style = "
background: red;">
<a href = "https://google.com" target = "_blank" style = "
border: 3px solid blue;
text-decoration: none;
display: block;
color: white;
text-transform: uppercase;
padding: 30px 0;
font-weight: 700;
font-size: 14px;
width: 100%;
box-sizing: border-box;
cursor: pointer;
letter-spacing: 0.0625em;">
<span>
MY BUTTON
</span>
</a>
</td>
</tr>
</table>
В этот момент я медленно, но верно схожу с ума...
Я пробовал это решение, но безуспешно
Я пробовал:
Я изменил принятый ответ, чтобы он выглядел так, как я хотел:
<table>
<tr>
<td align = "center" style = "
background: red;">
<a href = "https://google.com" target = "_blank" style = "
border: 3px solid blue;
text-decoration: none;
display: block;
text-transform: uppercase;
padding: 30px 0;
font-weight: 700;
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
letter-spacing: 2px;"><!--[if mso]><i style = "mso-font-width:245%;" hidden>    </i><span><![endif]-->
<span style = "color: rgb(255,255,255) !important">
MY BUTTON
</span>
<!--[if mso]></span><i style = "mso-font-width:245%;" hidden>    ​</i><![endif]-->
</a>
</td>
</tr>
</table>
Для меня это достаточно хорошо!
🤔 А знаете ли вы, что...
С помощью HTML можно создавать слайд-шоу и карусели изображений с использованием CSS и JavaScript.
Outlook Desktop Windows не поддерживает изменения отображения. Вы можете визуально изменить размер поля, используя <td>, но единственный способ увеличить размер кликабельной области — добавить строчные символы внутри <a>. Поскольку для встроенных символов нельзя установить ширину, вам нужно использовать что-то  , которое представляет собой em-пробел (не будет видимым). Затем вы можете сделать ширину 500% (максимум) и/или использовать несколько из них.
mso-text-raise можно использовать в качестве верхнего и нижнего отступа. Первая ссылка должна быть в два раза больше второй для обеспечения одинакового заполнения сверху и снизу.
<table cellpadding = "0" cellspacing = "0" width = "600" align = "center">
<tr>
<td align = "center" style = "
background: #ff0000;
padding: 0;
margin: 0;
border: none;
border-radius: 3px;">
<a href = "https://www.google.com.au" style = "background-color:#ff0000; text-decoration: none; padding: 30px 0; color: #ffffff; display:block; border-radius:3px; mso-padding-alt:0;text-underline-color:#ff0000;width:100%;text-align: center;font-size:14px;font-weight:700;cursor: pointer;letter-spacing: 0.0625em;"><!--[if mso]><i style = "mso-font-width:500%;mso-text-raise:60px" hidden>    </i><span style = "mso-text-raise:30px;"><![endif]-->My button<!--[if mso]></span><i style = "mso-font-width:500%;" hidden>    ​</i><![endif]-->
</a>
</td>
</tr>
</table>
Это ширина 600 пикселей. Мне удалось увеличить кликабельную область Outlook примерно до 580 пикселей. Окна Outlook для рабочего стола похожи на макет для печати (PDF), поэтому не пытайтесь сделать его адаптивным, просто определите точные пиксели (ну... дюймы и точки, он их преобразует!)