Проблема, с которой вы столкнулись здесь, связана со свойством shadow.Тени CSS всегда появляются за элементом, и он не будет видеть сквозь прозрачный фон.Итак, вот небольшая хитрость, с помощью которой вы можете достичь ожидаемого поведения с помощью свойства CSS position.
.but-container{
display: flex;
position: relative;
width: 300px;
height: 100px;
}
button{
z-index:1;
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
border-radius: 500px;
display: inline-block;
border: 2px solid black;
color: white;
font-family: "Quicksand", sans-serif;
font-size: 250%;
letter-spacing: 2px;
text-align: center;
padding: 20px 100px;
font-weight: 900;
-webkit-text-stroke: 2px black;
}
.but-shadow{
z-index: -1;
top: 8%;
left: 3%;
border-radius: 500px;
display: inline-block;
background-color: rgba(140,122,230,1);
height: 100%;
width: 100%;
position: absolute;
}
<div class="but-container">
<button>GO</button>
<div class="but-shadow"></div>
</div>
Как вы можете видеть здесь, вы должны использовать внешний контейнер, содержащий как <button>, так и <div>, которые действуют как тень.Поскольку ширина и высота этих элементов относительно родительского с процентными значениями, вы можете изменить размер внешнего <div> размера контейнера, так как вы хотите, чтобы внутренние элементы всегда были точно такого же размера, что и внешний <div>.так что он может использовать с отзывчивым дизайном также.