Как сверстать кнопку с задним фоном?

Question

Пытался сделать с помощью before и after, но если делаю position: absolute, то кнопка находится под задним фоном. z-index не помогает

Как можно сверстать это?

Answer 1

Можно примерно так:

.button {
  display: inline-block;
  border: 2px solid green;
  position: relative;
}

.button:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  height: 100%;
  border: 2px solid green;
  z-index: 2;
}

.button-inner {
  position: relative;
  background-color: white;
  color: green;
  z-index: 3;
  padding: 5px 5px 5px 30px;
}

.button-inner:before {
  content: '...';
  color: black;
  position: absolute;
  top: 5px;
  left: 10px;
}

<div class="button">
  <div class="button-inner">Выбрать файл</div>
</div>

Answer 2

Выбрать файл

.button {
  display: inline-block;
  border: 2px solid green;
  position: relative;
  padding: 10px;
  background: #fff;
}

.button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  border: inherit;
  z-index: -1;
}

<div class="button">Выбрать файл</div>

БЛОГ НА HUSL

Как сверстать кнопку с задним фоном?

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