CSS - 關閉按鈕

See the Pen CSS - Close Button by Molly Kan (@mollykannn) on CodePen.

HTML

<div class="sample-1">
  <span class="sample-1-close"></span>
</div>
<div class="sample-2">
  <div class="sample-2-close">
    <div class="sample-2-close--left"></div>
    <div class="sample-2-close--right"></div>
  </div>
</div>

CSS

.sample-1-close {
  position: absolute;
  cursor: pointer;
  color: #fff;
  font-size: 50px;
  font-family: Arial,sans-serif;
  border-radius: 50px;
  background: #605F61;
  line-height: 0px;
  padding: 23px 9px 23px 9px;  
}

.sample-1-close:before {
  content: "\00d7";
}

.sample-2-close {
  position:relative;
  cursor: pointer;
  top:0;
  left:0;
  width:50px;
  height:50px;
}

.sample-2-close--left, .sample-2-close--right {
  position:absolute;
  width: 0;
  top: 22px;
  left: 9px;
  height: 5px;
  border-style:solid;
  border-width:0 0 0 30px;  
}

.sample-2-close--left {
  border-color:#000;
  transform: rotate(45deg);
}

.sample-2-close--right {
  border-color:#000;
  transform: rotate(-45deg);
}