css按钮样式 |
您所在的位置:网站首页 › 网页按钮样式 › css按钮样式 |
如果你正在寻找一些高质量的 CSS 按钮的示例,那么这篇文章一定是你的“菜”。在本文中,我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集,并附有它们的代码片段,方便你将它们应用在你的 Web 项目上。 网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3,你可以实现背景的渐变、阴影以及光泽/闪亮的效果。 1. Plastic Buttons![]() 代码地址:【传送门】 2. Cool Buttons![]() 你可以从 6 款默认设计的颜色中随意挑选,或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类,所以你可以在一个类上设置默认的按钮样式以及颜色。 代码地址:【传送门】 3. Google Buttons![]() 作者受 Google 设计的启发,利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此相似的示例,它是由 Monkey Raptor 制作的扩展按钮,他为这些按钮进行了一些其他的混合。 代码地址:【传送门】 4. Bunch-o-Buttons![]() 代码地址:【传送门】 5. Social Buttons![]() 如果你需要在你的网站上添加一些社交分享按钮,那么这个纯 CSS 按钮合集包是个不错的选择。 代码地址:【传送门】 6. Jelly Animation![]() 除了那有趣的动画,让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式,更容易让任何启动网站或社交网络的用户产生点击的欲望。 代码地址:【传送门】 7. Parallax Button![]() 这个按钮也是我所见过的具备高级按钮效果的其中之一,它可以很好地融入任何网页。 代码地址:【传送门】 8. Hubspot Pills![]() 你会发现这组药片按钮只展现了红色和蓝色,但它也支持自定义颜色。而华丽的悬停与点击效果,也足以吸引到任何人的注意。 代码地址:【传送门】 9. Sexy SCSS Buttons![]() 这些由 SCSS 实现的按钮,它们具备了内外阴影效果,且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色,甚至可以将自己的创意混合于其中。 当它们融入至页面时,按钮的悬停与活动状态也有一种 3D 的既视感。 在任何网站上,这些按钮也比较容易实现,或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码,以便你的使用。 代码地址:【传送门】 10. Mozilla-Style Buttons![]() 我们可以看到,蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面,并且更容易吸引用户的注意。 代码地址:【传送门】 总结这 10 个独特的按钮集都是由纯 CSS3 开发的,你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。 这个列表中整理的内容,只是 CodePen 上冰山的一角。如果你正在寻找更多的资源,不妨常逛逛 CodePen ,或许你会收获到更多的惊喜。 感谢你的阅读。 注: 本文版权归原作者所有,仅用于学习与交流。 如需转载译文,烦请按下方注明出处信息,谢谢!英文原文:10 Free Code Snippets for Creating Beautiful CSS Buttons 作者:Jake Rocheleau 译者:IT程序狮 译文地址:http://www.jianshu.com/p/430817f5adee |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |