<div class="btn-wrap">
<button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
</div>
body {
background: #121212;
}
.btn-wrap {
position: relative;
z-index: 0;
padding: 0 0;
margin: 47px 0 0;
border-top: 1px solid blue;
}
.exitE {
position: relative;
z-index: auto;
margin: -25px auto 0;
inset: 0 0 0 0;
width: 47px;
height: 47px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: black;
border-radius: 50%;
border: 5px solid #0059dd;
display: flex;
cursor: pointer;
}
.exitE:after {
content: "";
position: absolute;
z-index: -1;
background: #121212;
left: -10px;
top: -10px;
width: calc(100% + 18px);
height: calc(100% + 18px);
border: 1px solid blue;
border-bottom-color: #121212;
border-left-color: #121212;
border-radius: 50%;
transform: rotate(-45.5deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.