使用纯 CSS 设计关闭按钮

关闭按钮通常用于在 web 应用程序或网站中的对话框、消息框或通知栏中关闭它们。本教程将介绍如何使用纯 CSS 设计漂亮的关闭按钮。

HTML 代码

首先，让我们编写 HTML 代码，以便我们创建一个 close 按钮。

<div class="close-btn-container">
  <button class="close-btn"></button>
</div>

这里我们创建了一个关闭按钮，button 元素将成为关闭按钮的容器。

CSS 样式

让我们添加一些 CSS 样式，以使我们的关闭按钮外观漂亮。

.close-btn {
  width: 30px;
  height: 30px;
  background: #999;
  border: none;
  cursor: pointer;
  position: relative;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
}
.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

这样，我们就创建了一个简单的关闭按钮样式，它会显示为一个灰色的圆形，其中包含两个白色的基准线，形成一个 X 字。我们利用伪元素 ::before 和 ::after 创建两个基准线，并通过 rotate 转换把它们转成 X 形状。

现在，当我们把按钮放在关闭按钮容器中时，我们可以使用绝对定位使关闭按钮位于右上角或左上角。

.close-btn-container {
  position: relative;
}

.close-btn {
  /* previous styles */
  position: absolute;
  right: 0;
  top: 0;
}

为了使关闭按钮与容器保持对齐，我们设置了容器上的参数 position: relative。接下来，我们通过设置关闭按钮的位置和上、右值，将其定位在容器的右上角。

结论

在本教程中，我们演示了如何使用纯 CSS 创建漂亮的关闭按钮。你可以在你的网站或应用程序中使用这个同样的技术，添加动态插入对话框、通知栏等元素的关闭功能。