Баннер с кнопкой

Итог кода выглядит примерно вот так:

Назначение блока: вы меняете в html-части ссылку на картинку по инcтрукции либо с помощью копирования url-адреса стандартного блока "баннер", меняете значения подписанных переменных и получаете блок кнопки с вашим цветом/закруглением/размером и своей фоновой картиночкой.

<div class="bnnr-blck">
<img src="https://cc26299.tmweb.ru/files/qLZ6-8oBKY4.jpg">
<a class="bnnr-link" href="#">Действие</a>
</div>
<style>
:root {
  /* Ориентирование фона по горизонтали, right, center или left */
  --horizontal: center;
  /* Ориентирование фона по вертикали, top, bottom или center */
  --vertical: center;
  /* Высота фона. Если сделать 0, то высота блока будет равна высоте кнопки + отступам по верткали */
  --strict-height: 300px;
  /* Отступ от верхнего края кнопки до верха текста кнопки */
  --pad-top: 10px;
  /* Отступ от правого края кнопки до правого края текста кнопки */
  --pad-right: 20px;
  /* Отступ от нижнего края кнопки до низа текста кнопки */
  --pad-bottom: 10px;
  /* Отступ от левого края кнопки до левого края текста кнопки */
  --pad-left: 20px;
  /* Прикрепить кнопку к центру, низу или верху. Для центра "center", для низа "flex-end", для верха "flex-start" */
  --btn-align: center;
  /* Расстояние от верха кнопки до верха фона. По умолчанию 0 */
  --do-verha: auto;
  /* Расстояние от низа кнопки до низа фона. По умолчанию 0 */
  --do-niza: auto;
  /* Ширина обводки кнопки */
  --btn-border-width: 1px;
  /* Цвет обводки кнопки */
  --btn-border-color: rgba(0,0,0,0.0);
/* Цвет фона кнопки */
  --btn-fon: black;
  /* Закругление кнопки */
  --zakruglenie: 16px;
/* Смещение тени по горизонтали */
  --shadow-x: -0px;
  /* Смещение тени по вертикали */
 --shadow-y: -0px;
/* Ширина тени */
  --shadow-spread: 10px;
  /* Цвет тени */
 --shadow-clr: rgba(255,255,255,0.6);
/* Ширина текста кнопки */
  --btn-color: darkgreen;
  /* Размер текста кнопки */
--btn-text-size: 26px;
  }
  .bnnr-blck {
min-height: var(--strict-height);
  display: grid;
  position: relative;
}
  .bnnr-blck img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--horizontal) var(--vertical);
z-index: 1;
  }
.bnnr-link {
display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
      box-sizing: border-box;
    height: max-content;
align-items: var(--btn-align);
  margin-top: var(--do-verha);
  margin-bottom: var(--do-niza);
  border: var(--btn-border-width) solid var(--btn-border-color);
  background: var(--btn-fon);
  width: max-content;
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--zakruglenie);
  filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-spread) var(--shadow-clr));
  color: var(--btn-color) !important;
  font-size: var(--btn-text-size) !important;
}
</style>