美丽的悬停保存按钮 - 它是如何完成的
美丽的悬停保存按钮 - 它是如何完成的
HTML
对于 HTML，我们只有一个带有按钮文本的 span 元素和一个按钮元素内的下载 svg。
<button>
<span>节省</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
</button>
CSS
对于 CSS，首先我们将设置按钮元素的样式。
首先，我将光标设置为指针，使用 flexbox 对齐里面的项目并添加一些填充。
然后我将背景颜色设置为浅蓝色，删除按钮的默认边框，将其设置为略微圆角并添加一点阴影。
我将宽度设置为 120 像素，字体设置为粗体，字体大小设置为 16 像素。
按钮 {
光标：指针；
显示：弯曲；
对齐项目：居中；
填充：5px 10px；
背景色：rgb(176, 206, 255);
边框：无；
盒子阴影：0 0 5px #999;
边框半径：3px；
宽度：120px；
字体粗细：600；
字体大小：16px；
}
对于按钮内的文本，我将宽度设置为 100% 和右边框，将其与图标分开。
我将高度设置为 40 像素，并使用 flexbox 在中心对齐文本。
跨度 {
宽度：100%；
右边框：1px 纯色 rgb(77, 98, 131);
高度：40px；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
}
对于 svg，我将只添加左填充。
SVG {
左边距：10px；
}
悬停时，我会将按钮的背景颜色更改为霓虹绿。
按钮：悬停{
背景色：rgb(0, 255, 102);
}
在按钮悬停时，我会将文本宽度设置为零并隐藏所有溢出的内容，以便文本在悬停时消失。
另外，我将添加一点过渡，以便消失平滑。
最后，我将边框属性设置为无。
按钮：悬停跨度{
宽度：0%；
过渡：0.2s；
边框：无；
溢出：隐藏；
}
在按钮悬停时，我将 svg 设置为 100% 宽度并删除左侧填充。
按钮：悬停SVG {
宽度：100%；
左填充：0；
}
就是这样。 ☺️
您可以通过视频教程找到整个代码 这里 .
谢谢你的阅读❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
