带有旋转效果的提交按钮 - 仅限 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 版权协议，转载请附上原文出处链接和本声明

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