Алексей Уколов

Через css проще спозиционировать за счёт background-size и background-position, а img нужен, чтобы поисковики проиндексировали картинку.

Если у вас в коде прямо так и написано, то дело в перемешанных кавычках.
Должно быть так:

<button type="submit" value="Сделать заказ" class="botton_form h4" onclick='
    if (document.getElementById("tel").value == "") 
    {
    window.open("images/сертификат.pdf", "_blank");
    }'>Скачать сертификат</button>

&:hover,
&:focus,
&:active {
  your: styles;
}

Текст должен быть внутри дива.

Насколько правильно данное решение?

Абсолютно неправильно. Нет никакого "лишнего" стандартного поведения - на то оно и стандартное.
Ну а уж заменять "лишнее" стандартное поведение кнопки "нелишним" стандартным поведением текстового поля и вовсе бред.

https://dadata.ru/suggestions/

Классика же - поворачивать контейнер на 45% через transform, а содержимое поворачивать в обратную сторону на столько же.
https://codepen.io/alexey-m-ukolov/pen/PBdazG

Как исправить?

После обработки данных формы бэкенд должен средиректить пользователя куда-нибудь. Адрес может быть тем же самым, главное, чтобы браузер сделал get-запрос, тогда обновление страницы будет работать как ожидается.

В комментариях же всё объясняется:

.row:hover {
  // Next row, slides are above their columns, giving downward motion on hover
  & ~ .row .slide { transform: translateY(-100%); }
  
  // Current row, slides to the right of their columns, giving left motion on hover
  .slide { transform: translateX(100%); }
  
  // Current row, next slides, slides to the left of their columns, giving right motion on hover
  & .col:hover ~ .col .slide { transform: translateX(-100%); }
  
  // Current slide
  .col:hover .slide {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
}

Коротко говоря, всё на селекторах.

Большинство email-клиентов просто проигнорируют ваш внешний css-файл. Добавьте правила прямо в html, как при обычной вёрстке писем.
Также шрифты нужно перенести на протокол HTTPS, добавить корректный SSL-сертификат и убедиться, что на сервере настроены корректные cross-origin-заголовки.

Проблема в этом правиле:

* {
  overflow-x: hidden;
}

Вообще, это очень плохая практика - сбрасывать таким образом какие-то правила. Это явный признак того, что человек не понимает, что происходит у него в CSS и борется сам с собой при помощи костылей. Учитесь, экспериментируйте, разбирайтесь почему работает так, а не иначе. На костылях и Тостере далеко не уехать.