带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
HTML
对于 HTML，我们需要一个带有文本和“检查”svg 元素的按钮。
我们将显示文本并隐藏 svg。
在按钮焦点上，我们将显示 svg 并隐藏文本元素。
<button class="submit_button">
<span>提交</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 {
高度：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 版权协议，转载请附上原文出处链接和本声明
