Почему не работает анимация(hover) именно этой кнопки?

Question

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.help{
  color: white;
  background-color: black;
  padding: 100px 0;
}

.black-circle{
    width: 3.2rem;
    height: 3.2rem;
    background-color: #000;
    border-radius: 1.2rem;
}

.help__text-box {
        flex-direction: column;
        text-align: center;
        max-width: 60rem;
        margin: 0 auto;
    }

.btn {
     font-size: 1.6rem;
     line-height: 1.25;
     background-color: white;
     letter-spacing: 0.4px;
     border-radius: 14px;
     padding: 11px 20px;
}
 .btn span {
     position: relative;
     color: black;
     top: calc(50% - 20px/2 - 2px);
     transition: all 0.1s ease;
}
 .btn:hover span {
     top: calc(50% - 15px/2 - 2px);
}

.help__btn {
        display: flex;
        max-width: fit-content;
        padding: 0.5rem;
        gap: 0.6rem;
        span{
            padding-right: 0.5rem;
        }
        margin: 0 auto;
        margin-top: 2.2rem;
    }

<section id="help" class="help">
    <div class="container">
        <div class="help__text-box flex">
            <h2 class="help__title title">Need help with photography or videography?</h2>
            <p class="help__sub subtitle">We're here for you!</p>
            <a href="#" class="help__btn btn">
                <div class="black-circle"></div>
                <span>Get in touch</span>
            </a>
        </div>
    </div>
</section>

Она должна чуть опуститься вниз(span в кнопке)

Answer 1

Не стоит полагаться на top/bottom/left/right для position: relative – поведение у них очень странное. Собственно, именно здесь и не работает % одновременно с px, хотя по идее должно. Ещё не забывайте между операторами ставить пробелы.

Тут куда лучше отцентровать всё через flex, align-items: center, а на hover задать margin-top. Тогда всё будет работать так, как задумано.

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.help {
  color: white;
  background-color: black;
  padding: 100px 0;
}

.black-circle {
  width: 3.2rem;
  height: 3.2rem;
  background-color: #000;
  border-radius: 1.2rem;
}

.help__text-box {
  flex-direction: column;
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}

.btn {
  font-size: 1.6rem;
  line-height: 1.25;
  background-color: white;
  letter-spacing: 0.4px;
  border-radius: 14px;
  padding: 11px 20px;
  display: flex;
  align-items: center;
}

.btn span {
  position: relative;
  color: black;
  transition: all 0.1s ease;
}

.btn:hover span {
  margin-top: 5px;
}

.help__btn {
  display: flex;
  max-width: fit-content;
  padding: 0.5rem;
  gap: 0.6rem;
  margin: 0 auto;
  margin-top: 2.2rem;
}

.help__btn span {
  padding-right: 0.5rem;
}

<section id="help" class="help">
  <div class="container">
    <div class="help__text-box flex">
      <h2 class="help__title title">Need help with photography or videography?</h2>
      <p class="help__sub subtitle">We're here for you!</p>
      <a href="#" class="help__btn btn">
        <div class="black-circle"></div>
        <span>Get in touch</span>
      </a>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Почему не работает анимация(hover) именно этой кнопки?

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