<div class="btn-wrap2">
  <button class="new-exitE" type="button" title="Exit" aria-label="Exit"><b></b></button>
</div>

<div class="btn-wrap2 bw2">
  <button class="new-exitE" type="button" title="Exit" aria-label="Exit"><b></b></button>
</div>
body {
  background: transparent;
}
body:before {
  content: "";
  position: fixed;
  inset: 0 0 0 0;
  background: linear-gradient(#121212, #eee);
  background-size: cover;
}

.btn-wrap2 {
  position: relative;
  z-index: 0;
  padding: 0 0;
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
}
.btn-wrap2:before,
.btn-wrap2:after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background: #0059dd;
}
.new-exitE {
  position: relative;
  display: flex;
  z-index: auto;
  margin: 0 auto;
  padding: 4px;
  inset: 0 0 0 0;
  width: 57px;
  height: 57px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: transparent;
  border: 1px solid #0059dd;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
  display: flex;
  cursor: none;
  pointer-events: none;
}
.new-exitE b {
  border: 5px solid #0059dd;
  cursor: pointer;
  pointer-events: initial;
  flex: 1 0 0;
  width: 37px;
  height: 37px;
  border-radius: 100%;
}
.bw2 b {
  background-image: linear-gradient(135deg, #ff6bff 0%, #00e6e6 100%);
  transform: rotate(45deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.