使用纯CSS编写确认的删除按钮

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

关于如何创建转换为“确认删除”的删除按钮的教程，点击时 - 仅限 CSS。

HTML

对于 HTML，我们需要一个按钮和两个元素。第一个是带有“确认删除”文本的 span 元素，第二个是删除 svg。

<button>
    <span>确认删除</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
</button>

CSS

对于 CSS，首先我们将设置按钮样式。

我们将位置设置为相对，宽度和高度设置为 50x50 像素，这将形成一个边框半径设置为 25 像素的圆圈。
我们将边框设置为红色，背景设置为白色，并带有一点暗盒阴影。

然后我们将光标设置为指针，溢出设置为隐藏并转换为 300 毫秒。

button {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 2px solid rgb(231, 50, 50);
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px #333;
    overflow: hidden;
    transition: .3s;
}

在悬停时，我们将背景颜色更改为浅红色，稍微增加它的大小，以及盒子阴影并添加一点过渡。

button:hover {
    background-color: rgb(245, 207, 207);
    transform: scale(1.2);
    box-shadow: 0 0 4px #111;
    transition: .3s;
}

现在我们将为删除 svg 设置样式。

我们将颜色设置为与按钮边框相同的红色，并使用带有 transform 属性的绝对位置将元素放置在中心。

最后，我们将添加一点过渡。

svg {
    color: rgb(231, 50, 50);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

在悬停时，svg 我们将不透明度设置为 0 到 svg。

通过添加过渡，这种消失会变得非常流畅。

button:focus svg {
    opacity: 0;
    transition: .3s;
}

至于按钮内的文本元素，我们将宽度设置为 150px 并将其放置在中心（与 svg 相同 - 使用 transform 属性）。

我们将不透明度设置为零，这意味着不会看到这个元素。我们将在悬停时显示它（隐藏 svg 时）。

我们将颜色设置为红色（与 svg 和按钮边框相同的红色），字体粗细设置为 300 并转换为 300 毫秒。

span {
    width: 150px;
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%);
    color: rgb(231, 50, 50);
    font-weight: 600;
    transition: .3s;
}

在焦点上，我们将按钮的宽度设置为 150 像素（与文本元素相同），将高度设置为 50 像素。

此外，我们将转换设置为 300 毫秒。

button:focus {
    width: 150px;
    height: 50px;
    transition: .3s;
}

在按钮焦点上，我们将文本元素的不透明度设置为 1。 将转换设置为 300 毫秒，这将看起来很平滑。

button:focus span {
    opacity: 1;
    transition: .3s;
}

下面是最终效果

最后

谢谢观看，如果你觉得本文对你有帮助的话，麻烦点个赞，加个关注，后续还会继续更新这方面的内容。