Пытался сделать с помощью before и after, но если делаю position: absolute, то кнопка находится под задним фоном. z-index не помогает
Как можно сверстать это?
Пытался сделать с помощью before и after, но если делаю position: absolute, то кнопка находится под задним фоном. z-index не помогает
Как можно сверстать это?
Можно примерно так:
.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>
.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>