Каким способом сверстать такую кнопку?

Question

[Norwood]

Есть такая кнопка. Каким способом её лучше сверстать? Flex position absolute? Сделал вот так, но чуть сжимаешь и всё ломается.

<div class="general-info__btn-wrap">
          <a class="general-info__btn" href="#">
            <img class="general-info__img" src="img/section1/btn.png"
                 alt="button">связь со специалистом</a>
        </div>

.general-info__btn-wrap{
    padding-top: 40px;
    padding-left: 40px;
    position: relative;
}
.general-info__btn {
    text-decoration: none;
    text-transform: uppercase;
    padding: 20px 25px 20px 65px;
    background-color: var(--dark-blue-color);
    font-weight: bold;
    color: var(--white-color);
    font-size: var(--font-size-14);
}
.general-info__img{
    position: absolute;
    top: 20%;
    left: 0;
}

Comments

[Ankhena]

Страшная-то какая...

Это не img, а псевдоэлемент. Либо img с aria-hidden="true".
Да, абсолютом или гридами.
Только relative не у div, а у ссылки должен быть.
А чтобы не съезжало, то размеры в процентах, а не в px.
И для пропорций либо aspect-ratio, если вдруг позволяют браузеры или хак с паддингом (но поскольку паддинг для псевдо, то лучше гридами)

[Norwood]

Ankhena, если сделать псевдоэлементом, тогда при нажатии на него, не будет отрабатывать ссылка на кнопке. Я не знаю, нормально ли такое поведение будет?

[Ankhena]

Norwood, с чего это не будет?
https://codepen.io/AnnaSummer/pen/MWryPrM

[Norwood]

Ankhena, спасибо, не думал, что ссылка "распространяется" и на псевдоэлемент