仅使用CSS做一个具有旋转效果按钮

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

HTML

对于 HTML，我们需要一个带有文本和“检查”svg 元素的按钮。

我们将显示文本并隐藏 svg。

在按钮焦点上，我们将显示 svg 并隐藏文本元素。

<button class="submit_button">
    <span>Submit</span>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
    </svg>
</button>

CSS

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

我们将使用 flexbox 将高度设置为 30 像素并居中对齐元素。

现在我们将光标设置为指针并添加一点过渡。 最后，让我们更改文本和边框颜色，并添加一点半径。

.submit_button {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .5s;
    color: rgb(196, 113, 62);
    border-color: rgb(196, 113, 62);
    border-radius: 2px;
}

在焦点上，我们将半径设置为 15 像素。高度为 30 像素，这将形成一个圆圈。

我们将光标设置为默认值，以便该按钮看起来不可点击。

我们将边框和文本颜色更改为绿色。

让我们旋转 720 度（两个完整的圆 - 360 * 2）并通过添加过渡，这种变化会顺利进行。

.submit_button:focus {
    border-radius: 15px;
    cursor: default;
    border-color: rgb(99, 184, 33);
    color: rgb(99, 184, 33);
    transform: rotate(720deg);
    transition: .5s;
}

现在我们将样式添加给 svg。

仅当按钮获得焦点时才会显示此元素。

我们将宽度设置为 0，将按钮焦点设置为 15 像素。

通过添加一点过渡，这个元素将缩小和扩大，漂亮而平滑。

.submit_button svg {
    transition: .5s;
    width: 0;
}
.submit_button:focus svg {
    transition: .5s;
    width: 15px;
}

现在我们将设置文本元素的样式。

仅当按钮未处于焦点时才会显示此元素。

为此，我们将宽度设置为 50 像素，然后将按钮焦点设置为 0 像素。

让我们在焦点上将字体大小设置为 0，这样文本看起来就在增长。

通过设置过渡，这将顺利进行。

.submit_button span {
    transition: .5s;
    width: 50px;
}
.submit_button:focus span {
    transition: .5s;
    width: 0;
    font-size: 0;
}

总结

就是这样，是不是很简单，赶紧去试试吧， 感谢您的阅读❤️。