带有旋转效果的提交按钮 - 仅限 CSS - 一步一步

带有旋转效果的提交按钮 - 仅限 CSS - 一步一步

HTML

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

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

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

提交

CSS

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

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

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

.submit_button {
高度：30px；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
光标：指针；
过渡：0.5s；
颜色：RGB（196、113、62）；
边框颜色：rgb(196, 113, 62);
边框半径：2px；
}

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

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

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

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

.submit_button:焦点{
边框半径：15px；
光标：默认；
边框颜色：rgb(99, 184, 33);
颜色：RGB（99、184、33）；
变换：旋转（720度）；
过渡：0.5s；
}

现在我们将样式“检查” svg。

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

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

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

.submit_button SVG {
过渡：0.5s；
宽度：0；
}
.submit_button:focus SVG {
过渡：0.5s；
宽度：15px；
}

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

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

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

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

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

.submit_button 跨度 {
过渡：0.5s；
宽度：50px；
}
.submit_button:焦点跨度{
过渡：0.5s；
宽度：0；
字体大小：0；
}

就是这样。

您可以找到视频教程和完整代码 这里 .

感谢您的阅读。 ❤️

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/40244/44510109