博客

<button class="close-button">X</button>

2. 设置样式

接下来，需要为这个关闭按钮设置样式。可以使用CSS3中的transform属性来创建符号“X”的形状，同时设置颜色、大小、边框等样式。

例如，下面的CSS代码创建了一个用纯CSS设计的关闭按钮：

.close-button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  transition: all .2s ease-in-out;
}

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

.close-button:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

上面的代码中，先为关闭按钮元素设置了宽度、高度、边框、边框半径、背景颜色、文字颜色、文字大小等基本样式。然后使用:before和:after选择器为按钮设置符号“X”的样式，分别使用transform属性对它们进行旋转，得到一个完整的“X”符号。最后使用transition属性为按钮添加了动画效果。

3. 完成

现在，一个用纯CSS设计的关闭按钮就完成了。可以在需要关闭按钮的地方放置这个HTML元素。

示例：

下面提供两个示例，以更好地说明如何用纯CSS设计一个关闭按钮。

示例1: 使用有限的HTML结构

<a class="close-button" href="#">关闭</a>

对应的CSS样式如下：

.close-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #ff0000;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  border-radius: 3px;
}

.close-button:hover {
  background-color: #cc0000;
  text-decoration: none;
}

.close-button:focus {
  outline: 0;
}

上面的样式中，定义了按钮的内边距、背景和文字颜色、字体大小等基本样式。使用:hover伪类为其添加了悬停时的样式，使用:focus属性去掉了按钮的默认边框。

示例2: 创建标注和角标

在这个示例中，在关闭按钮上加入一个标注和一个小角标。

<button class="close-button">
  <span class="close-text">关闭</span>
  <span class="close-arrow"></span>
</button>

对应的CSS样式如下：

.close-button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  transition: all .2s ease-in-out;
}

.close-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #000;
  display: none;
  opacity: 0;
}

.close-arrow {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  display: none;
  opacity: 0;
}

.close-button:hover {
  background-color: #ccc;
}

.close-button:hover .close-text {
  display: block;
  opacity: 1;
}

.close-button:hover .close-arrow {
  display: block;
  opacity: 1;
}

在上面的示例中，我们使用了两个 元素来创建标注和小角标。分别使用position属性设置它们的位置，并通过:hover伪类动态设置它们的opacity属性，从而显示和隐藏标注和角标。

如果使用SVG图标，甚至可以做出更加丰富的关闭按钮效果。