使用CSS创建添加好友按钮持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详

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

HTML

对于 HTML，我们需要一个内部有两个 span 的 div 元素。一种带有“+”文本，另一种带有“添加朋友”文本。

现在我们将设置类，“button”到 div 元素，“plus”到带有“+”文本的 span 元素，“text”类到带有“Add Friend”文本的 span 元素。

<div class="button">
    <span class="plus">+</span>
    <span class="text">添加好友</span>
</div>

CSS

对于 CSS，首先，我们将使用类“按钮”设置 div 元素的样式。

我们将设置一些基本的样式、背景、边框、颜色......

我们将宽度和高度设置为 50 像素，形成一个边界半径为 25 像素的圆。

使用 flexbox，我们将元素居中对齐。

现在我们将添加一点过渡，隐藏所有溢出并将光标设置为指针。

.button {
    background-color: rgb(78, 180, 203);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
}

至于 out span 元素，我们将 position 设置为 absolute 并添加一点过渡。

.plus, .text {
    position: absolute;
    transition: .3s;
}

在 div 悬停时，我们将其宽度设置为 100 像素并转换为 300 毫秒。

.button:hover {
    width: 100px;
    transition: .3s;
}

在 div 悬停时，我们将通过将不透明度设置为零来隐藏带有“+”文本的 span 元素。

我们还将设置过渡，使其平滑消失。

.button:hover .plus {
    opacity: 0;
    transition: .3s;
}

对于具有“text”元素，我们将不透明度设置为零。此元素将出现在 div 悬停上（当加号消失时）。

.text {
    opacity: 0;
}

在 div 悬停时，我们将不透明度设置为 1，在跨度上使用 text类。

稍微过渡一下，这会显得很顺利。

.button:hover .text {
    opacity: 1;
    transition: .3s;
}

最后

案例在下方你可以试试 就是这样。谢谢阅读。❤️

使用CSS创建添加好友按钮

HTML

CSS

最后

往期精彩