Верстаю свой 2 макет, мучаюсь с кнопкой, которая должна быть за ссылкой

Question

По курсу web разработчик я сверстал свой первый макет. Перед тем, как продолжить курс, я решил закрепить свои знания и сверстать ещё один макет, но уже полностью сам. Что ж, я встретился с новой конструкцией, которую я пока что не могу реализовать.

Вот этот кружок (кнопка) будет изменяться при наведении, я подогнал эту кнопку к ссылке. Теперь при наведении кнопка находится над ссылкой. Мне нужно сделать ссылку над кружком.

У меня же получается вот так:

Я пытался реализовать это с помощью z-index, но кнопка пропадает вовсе.

Как правильно сделать такую штуку?? p.s Цвета и расположение сейчас не то, которое будет в конечном варианте. Я менял position relative у разных элементов, смотря что изменяется.

.promo {
  background: url('/img/bg/first_bg.jpg') center center/cover no-repeat;
  height: 900px;
  padding: 70px 0 37px 0;
}

.promo .promo_btn {
  margin-top: 100px;
  text-align: center;
  position: relative;
}

.promo .promo_round {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 462px;
  top: -40px;
  z-index: -1;
}

.promo .promo_round:hover {
  background-color: yellow;
}

.promo .promo_entry {
  font-family: 'Noto Sans';
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #FFFFFF;
  margin: 0 auto;
  text-decoration: none;
  z-index: 1;
}

<section class="promo">
  <div class="container">
    <div class="promo_btn">
      <a href="#" class="promo_entry">
                записаться на консультацию
                <div class="promo_round">
                    <img src="/icons/arrow_white.svg" alt="arrow">
                </div>
            </a>
    </div>
  </div>
</section>

Answer 1

Пример

body {
  background-color: #ADA4A4;
  margin: 0;
  padding: 2rem;
}

.btn {
  font-size: 1rem;
  background-color: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.btn__icon svg {
  height: 1.5rem;
  width: 1.5rem;
}

.btn__text {
  margin-left: -1rem;
  margin-top: 1.25rem;
}

.btn:hover .btn__icon {
  background-color: #A9A32A;
}

<button class="btn">
  <span class="btn__icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/></svg>
  </span>
  <span class="btn__text">Button text text text</span>
</button>

Answer 2

Как некую идею, могу предложить такой вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
    background-color: silver;
}
.promo_entry{
    position: absolute;
    top: 200px;
    left: 200px;
    font-family: 'Noto Sans';
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    margin: 0 auto;
    text-decoration: none;
}
.promo_entry span {
    position: relative;
    color: green;
    z-index: 2;
}
.promo_entry:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 2px solid red;
    left: -40px;
    top: -60px;    
    background-image: url(https://adonius.club/uploads/posts/2022-02/1643872023_3-adonius-club-p-belaya-strelka-na-prozrachnom-fone-9.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>
<section class="promo">
    <div class="container">
        <div class="promo_btn">
            <a href="#" class="promo_entry">
                <span>записаться на консультацию</span>
            </a>
        </div>        
    </div>
</section>
</body>
</html>

БЛОГ НА HUSL

Верстаю свой 2 макет, мучаюсь с кнопкой, которая должна быть за ссылкой

Ответы (2 шт):