1

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

введите сюда описание изображения

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

2
  • 1
    Добавьте пример вашей реализации в вопрос
    – Darth KYL
    26 мар 2021 в 13:32
  • @DarthKYL: Автор что, за Вас всё будет делать??? :-)
    – UModeL
    26 мар 2021 в 13:42

2 ответа 2

2

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

.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>

0
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.