Имеется кнопка (находится на странице position:absolute
).
Нужно сделать для нее 2 бордера, но так, чтобы не заходила на другой бэкграунд. Прикладываю скриншот + что пытался сделать в css.
&-btn-play {
top: 45%;
right: 48.4%;
color: white;
display: flex;
width: 63px;
height: 63px;
border-radius: 50%;
border: none;
margin: auto;
align-items: center;
justify-content: center;
background: #E70012;
box-shadow: -15px -10px 50px rgba(0, 0, 0, 0.7);
z-index: 5;
&::after{
content: '';
opacity: 0.5;
border: 1px solid #FAFAFA;
box-sizing: border-box;
width: 132px;
height: 132px;
position: absolute;
left: -35px;
border-radius: 50% ;
-webkit-border-radius: 50% ;
-moz-border-radius: 50% ;
-ms-border-radius: 50% ;
-o-border-radius: 50% ;
}
}
с псевдоэлементом получил один бордер вокруг. Но как скрыть его правую часть? А также, как накинуть еще 1 такой же бордер? (дать поверх кнопки див?)