<div class="btn-wrap">
<button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
</div>
<div class="btn-wrap b2">
<button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
</div>
body {
background: transparent;
}
body:before {
content: "";
position: fixed;
inset: 0 0 0 0;
background: linear-gradient(#121212, #eee);
background-size: cover;
}
.btn-wrap {
position: relative;
z-index: 0;
padding: 0 0;
margin: 1rem 0 0;
display: flex;
align-items: center;
}
.exitE {
position: relative;
z-index: auto;
margin: 0 auto;
inset: 0 0 0 0;
width: 47px;
height: 47px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: transparent;
border-radius: 50%;
border: 5px solid #0059dd;
display: flex;
cursor: pointer;
}
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 30px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 30px 30px 0 0;
pointer-events: none;
}
.btn-wrap:before,
.btn-wrap:after {
content: "";
flex: 1 0 0;
height: 1px;
background: blue;
transform: translatey(1px);
}
.btn-wrap:before {
margin-right: 5px;
}
.btn-wrap:after {
margin-left: 5px;
}
.b2 .exitE:after {
border-radius: 57px 57px 0 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.