Блок с z-index: -1; уходит за фон

Question

Взял анимацию для кнопки, у нее z-index: -1, чтобы текст не скрывался за фоном, но у родительского элемента, где расположена кнопка есть фоновая картинка и заполнение прячется за фоном, как это можно исправить?

div {
  height: 180px;
  padding: 64px 0 0;
  box-sizing: border-box;
  background: 50vw center / contain no-repeat url(https://picsum.photos/300/180);
  }

a.animated-button.thar-three {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  0s;
}

a.animated-button.thar-three:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nthree;
}

a.animated-button.thar-three:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}

a.animated-button.thar-three:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  0s;
}

<div class="col-md-3 col-sm-3 col-xs-6">
  <a href="#" class="btn btn-sm animated-button thar-three">Заказать</a>
</div>

Answer 1

Обернуть кнопку в div с позицией relative и задать zindex выше

Answer 2

В данном случае, достаточно добавить <a> значение z-index которое ≥0:

div {
  height: 180px;
  padding: 64px 0 0;
  box-sizing: border-box;
  background: 50vw center / contain no-repeat url(https://picsum.photos/300/180);
}

a.animated-button.thar-three {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  z-index: 0;    /* ◄◄◄ */
}

a.animated-button.thar-three:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nthree;
}

a.animated-button.thar-three:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}

a.animated-button.thar-three::before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  0s;
}

<div class="col-md-3 col-sm-3 col-xs-6">
  <a href="#" class="btn btn-sm animated-button thar-three">Заказать</a>
</div>

БЛОГ НА HUSL

Блок с z-index: -1; уходит за фон

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