<div class="close-btn"></div>
$radius: 80px;
$bg-color: #3498DB;
$bg-color-active: #2980B9;
$line-width: 3px;
$line-color: #ECF0F1;

.close-btn {
  width: $radius * 2;
  height: $radius * 2;
  border-radius: $radius;
  background-color: $bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
  
  &:active {
    background-color: $bg-color-active;
  }
  
  &:before, &:after {
    content: '';
    width: $radius;
    height: $line-width;
    background-color: $line-color;
    position: absolute;
  }
  
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
}


// for display
.close-btn {
  position: absolute;
  top: calc(50% - #{$radius});
  left: calc(50% - #{$radius});
}
View Compiled
// fix ":active" in iOS
document.body.addEventListener('touchstart', function (){});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.