我为你的下一个大项目制作了 100 个 CSS 按钮🚀️

如果您喜欢这篇文章，请不要忘记点击心形按钮来表达您的赞赏。

您可能会想：这样开始一篇文章真是奇怪……

但我只是想向你展示按钮确实无处不在！

eludadev / ui按钮

100 个现代 CSS 按钮。所有你能想到的样式。

🚀️ 我们正在进行产品搜寻！

如果您希望我继续为您制作精彩的免费资源，我将非常感谢您对我的Product Hunt发布的反馈和支持！🤗️

🤖️ 要查看代码，请点击其中一个链接

预览	关联	描述
	基本的	单击或悬停时会改变颜色的 CSS 按钮。
	倒三角形	单击或悬停时，CSS 按钮会将其两个倒三角形滑动到中间。
	线滑梯	CSS 按钮，在悬停或单击时滑动其伪元素下划线。
	不要越界	CSS 按钮，在悬停或点击时跨越自身并展开。
	切片器和选框	CSS 按钮在单击或悬停时会切片其背景并垂直循环其内容。
	放大和旋转文本	CSS 按钮，当悬停或点击时，将两个向内指向的伪元素三角形滑动到中心。
	交替块和文本翻转	滑动四个交替块的 CSS 按钮

…

在 GitHub 上查看

你觉得无聊。于是你拿出手机，点击按钮——

1. 打开它（物理按钮）
2. 打开Twitter 应用程序（图标按钮）
3. 转到主页（导航按钮）
4. 喜欢并回复推文（操作按钮）

并且这个清单还可以继续列下去……

我想你现在明白了，我们痴迷于按按钮！那么，让我来提个主意……

按钮应该更有趣！我说的“有趣”，其实是指——

• 实际的，
• 精确的，
• 和現代的。

但作为 Web 开发人员，我们已经不得不担心很多其他事情——

• 可访问性（a11y），
• 网络生命体征，
• 搜索引擎优化。

想象一下，如果有人能消除一个小障碍，那么我们就可以专注于更重要的事情……

我决定成为那样的人。我承担起打造按钮的责任——

• 可访问（使用 ARIA 属性），
• 现代风格，
• 响应式（适用于桌面和移动设备）。

不仅如此，我还决定为这些按钮制作一百种不同的样式。保证您能找到一种适合您网站的样式！

现在让我们来分解一下我最喜欢的按钮样式之一：Overfold。

clip-path它首先从一个角到另一个角开始动画。

效果的第二部分涉及垂直滚动文本，同时使用对其进行剪辑overflow: hidden。

你知道吗？我正在制作150 个 CSS 按钮。关注我，第一时间了解最新动态！🤗

[已删除用户]