閉じるボタンのバツアイコンをCSSで作成したサンプル

<button class="close-button">
  <div class="close-button__line"></div>
  <div class="close-button__line"></div>
</button>

.close-button {
  --close-btn-size: 30px;
  --close-btn-width: 100%;
  --close-btn-height: 2px;
  --close-btn-color: #ccc;

  position: relative;
  height: var(--close-btn-size);
  width: var(--close-btn-size);
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
}

.close-button__line {
  position: absolute;
  background: var(--close-btn-color);
}

.close-button__line:nth-child(1) {
  left: 0;
  top: 50%;
  transform: translate(0%, -50%) rotate(45deg);
  width: var(--close-btn-width);
  height: var(--close-btn-height);
}

.close-button__line:nth-child(2) {
  left: 50%;
  top: 0;
  transform: translate(-50%, 0%) rotate(45deg);
  width: var(--close-btn-height);
  height: var(--close-btn-width);
}

元記事を表示する