Почему background перекрывает название кнопки?

Question

Я хочу сделать эффект при наведении на кнопку, чтобы background плавно менялся слева на право, но он меняется и закрывает надпись на кнопке, как это исправить?

button:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 42px;
    background:red;
    border-radius: 5px;
    transition: all 2s ease;
}

button:hover:before {
    width: 100%;
}

Answer 1

Вы можете вынести текст, который находится в кнопке, на уровень выше. Например так:

<button>
  <span>
    Text
  </span>
</button>

А в стилях прописать

button span 
{ 
  position: relative;
  z-index: 2;
}

Answer 2

Вы можете добавить свойство z-index для :before, установив его значение меньше, чем у кнопки.

button {
    position: relative;
    z-index: 1;
}
button:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 42px;
    background:red;
    border-radius: 5px;
    transition: all 2s ease;
    z-index: -1;
}

БЛОГ НА HUSL

Почему background перекрывает название кнопки?

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