CSS按钮样式，带代码传送门

桃扇骨 2022-12-29 14:28 167阅读 0赞

## 1. Plastic Buttons ##

![d8ac997ab443b1505a7e5e115b19730c.png][][这组按钮][Link 1]相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。

> 代码地址：【[传送门][Link 1]】

## 2. Cool Buttons ##

![3cbc67abf440eb8fde4f499eeab25a02.png][]这是一组由 Felipe Marcos 制作的 [酷炫按钮][Link 2]。与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。

你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。

> 代码地址：【[传送门][Link 2]】

## 3. Google Buttons ##

![28733443352bd64545f66c787e084c8c.png][]Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在 [此 Pen ][Pen]中克隆了这些风格。

作者受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此[相似的示例][Link 3]，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。

> 代码地址：【[传送门][Pen]】

## 4. Bunch-o-Buttons ##

![3d3c1c3dc33cb263dca45fac0d3def88.png][]这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与 [扁平化样式][Link 4]间任意切换。是不是很便捷呢？

> 代码地址：【[传送门][Link 5]】

## 5. Social Buttons ##

![653da85e2170ef9a424116e0d545515d.png][]这是由具备独特的配色方案和品牌图标组成的 [社交按钮合集][Link 6]。开发者 Stan Williams 在 [GitHub][]上也发布了这个合集，并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成，同时这些按钮都有一个背景上的闪亮渐变，但它们的质量都是不错的。

如果你需要在你的网站上添加一些[社交分享按钮][Link 7]，那么这个纯 CSS 按钮合集包是个不错的选择。

> 代码地址：【[传送门][Link 6]】

## 6. Jelly Animation ##

![b33b2d51bc5427cfb52caa7f850e36a1.png][]乍一看，你可能会认为这是一个普通的按钮。但在点击按钮后，你会发现这款果冻按钮具备了绑定到单击事件的特殊动画效果。

除了那有趣的动画，让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式，更容易让任何启动网站或社交网络的用户产生点击的欲望。

> 代码地址：【[传送门][Link 8]】

## 7. Parallax Button ##

![75b73286e2f68555d82f0821509d7e5b.png][]这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按钮。按钮的整个背景与阴影都是利用纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也利用了一些 JavaScript ，实现了按钮悬停和点击时的视觉畸变的效果。

这个按钮也是我所见过的具备高级按钮效果的其中之一，它可以很好地融入任何网页。

> 代码地址：【[传送门][Link 9]】

## 8. Hubspot Pills ##

![01d5e33b3493c58ba350783d257293b9.png][]这组按钮是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相似，但它们是由可以应用于任何元素的 CSS 类构建的。

你会发现这组药片按钮只展现了红色和蓝色，但它也支持自定义颜色。而华丽的悬停与点击效果，也足以吸引到任何人的注意。

> 代码地址：【[传送门][Link 10]】

## 9. Sexy SCSS Buttons ##

![e9cbd8b128f543c56be5dd725b806deb.png][]大多数前端开发者都热衷于利用 Sass/SCSS，因为它们更容易编写，更能提升开发者的工作效率。

这些由[ SCSS 实现的按钮][SCSS]，它们具备了内外阴影效果，且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混合于其中。

当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。

在任何网站上，这些按钮也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。

> 代码地址：【[传送门][SCSS]】

## 10. Mozilla-Style Buttons ##

![80bffce9b865dfacdfe502176f4a1484.png][]Mozilla 网站曾经历了一次 [品牌重塑][Link 11]，它们放弃了传统的塑料设计，但我却很中意他们原来的设计风格。幸运的是，开发者 Felix Schwarzer 通过 [他的代码][Link 12]再次重现了他们曾经的设计。

我们可以看到，蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面，并且更容易吸引用户的注意。

> 代码地址：【[传送门][Link 12]】

## 总结 ##

这 10 个独特的按钮集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。

这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在寻找更多的资源，不妨常[逛逛 CodePen ][CodePen]，或许你会收获到更多的惊喜。

感谢你的阅读。

原文博客传送门：[https://blog.csdn.net/hzp666/article/details/69221364][https_blog.csdn.net_hzp666_article_details_69221364]

注：

1.  本文版权归原作者所有，仅用于学习与交流。
2.  如需转载译文，烦请按下方注明出处信息，谢谢！

> 英文原文：[10 Free Code Snippets for Creating Beautiful CSS Buttons][]  
> 作者：[Jake Rocheleau ][Jake Rocheleau]  
> 译者：[IT程序狮][IT]  
> 译文地址：[http://www.jianshu.com/p/430817f5a][http_www.jianshu.com_p_430817f5a]

# 8款超酷而实用的CSS3按钮动画 #

原文作者[html5tricks][]，转载请注明出处

很久没有向大家分享关于[CSS3按钮][CSS3]的动画特效了，今天就给大家带来8款超酷而实用的CSS3按钮动画，由于google字体服务被屏蔽的缘故，所以你在截图上看到的字体和实际演示会有所差异。一起来看看这些CSS3按钮吧。

## 1、CSS3分享按钮动画特效 ##

这是一款基于CSS3的社会化分享按钮，按钮非常简单，提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标，并且在鼠标滑过这些按钮时，利用CSS3的动画特性出现滑动的动画效果。

[![css3-share-button-animation][]][css3-share-button-animation 1]

[在线演示][css3-share-button-animation 1]        [源码下载][Link 13]

## 2、[HTML5][]/CSS3悬浮按钮特效 Canvas彩球飞舞效果 ##

这次要分享一个非常具有动画色彩的[CSS3按钮][CSS3]，按钮的外观比较一般，但它有两个特别的地方：一、按钮悬浮，整个按钮看上去像是悬浮在半空中一样，很立体；二、点击按钮时利用HTML5 Canvas绘制彩球飞舞的效果，非常炫酷。

[![html5-css3-canvas-button][]][html5-css3-canvas-button 1]

[在线演示][html5-css3-canvas-button 1]        [源码下载][Link 14]

## 3、纯CSS3实现发光动画按钮特效 ##

这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如[纯CSS3 3D开关按钮][CSS3 3D]、[纯CSS3实现动感弹性按钮][CSS3 1]等，都非常不错，也有[HTML5][]动画按钮，大家可以自己看看。

[![pure-css3-shine-button][]][pure-css3-shine-button 1]

[在线演示][pure-css3-shine-button 1]        [源码下载][Link 15]

## 4、纯CSS3动画按钮 可左右滑动 ##

利用CSS3的一些动画属性，我们可以让一些平凡的按钮变得生动有趣，提高用户体验。今天分享的这款CSS3动画按钮就非常特别，只要你用鼠标滑过按钮，按钮的背景就会出现一个很可爱的滑块背景，这个滑块背景可以左右滑动，鼠标移出按钮时，又会将滑块移出，看下面的按钮演示，非常动感。

[![css3-slide-button-animation][]][css3-slide-button-animation 1]

[在线演示][css3-slide-button-animation 1]        [源码下载][Link 16]

## 5、纯CSS3背景渐变按钮 按钮图标淡入淡出动画 ##

今天我们要再来分享一款纯CSS3实现的按钮动画，这款按钮动画有以下特点：当鼠标滑过按钮时，按钮上的小图标便会以爆炸的方式淡出按钮，取代它的时相应的文字，当鼠标离开按钮时，小图标又会以爆炸的方式淡入按钮中。更多CSS3按钮，我们可以在[CSS3按钮][CSS3]栏目中查找。

[![css3-icon-animation-button][]][css3-icon-animation-button 1]

[在线演示][css3-icon-animation-button 1]        [源码下载][Link 17]

## 6、纯CSS3实现动感弹性按钮 ##

今天我们来分享一款很有意思的CSS3按钮，当你把鼠标滑过按钮时，整个按钮就会全身扭动起来，像是有弹性一样，非常动感。另外，按钮的结构非常简单，你可以通过合适的配色，让按钮更加贴切你的网站，最后推荐另外一款CSS3按钮：[CSS3多样式小图标按钮 带分享按钮][CSS3_]

[![css3-gelatin-button][]][css3-gelatin-button 1]

[在线演示][css3-gelatin-button 1]        [源码下载][CSS3 1]

## 7、CSS3圆角动画按钮 按钮颜色丰富 ##

前面刚刚分享过一款[CSS3实现的分享按钮][CSS3 2]，非常简单实用。现在在来分享一款[CSS3按钮][CSS3]，首先这款CSS3按钮是圆角的，正常情况下有着不同颜色的边框线，按钮是空心的，鼠标滑过按钮时，按钮即以淡入的效果填充背景色，鼠标移出时又以淡出的效果取消背景色，是一款简单而又实用的CSS3按钮。

[![css3-ghost-buttons][]][css3-ghost-buttons 1]

[在线演示][css3-ghost-buttons 1]        [源码下载][Link 18]

## 8、CSS3 3D弹性按钮效果 带弹性质感 ##

之前我们分享过一款非常酷的[纯CSS3 3D按钮 按钮酷似牛奶般剔透][CSS3 3D_]，这款按钮的特点有二：牛奶般的立体外观，按钮按下时非常柔和的弹性效果。今天要分享的这款CSS3按钮和这款按钮差不错，也同样拥有3D的效果，按钮在按下时带有弹性质感。

[![css3-3d-reakustuc-button][]][css3-3d-reakustuc-button 1]

[在线演示][css3-3d-reakustuc-button 1]        [源码下载][Link 19]

以上就是8款超酷而实用的CSS3按钮动画，欢迎收藏分享。

原文链接：[https://www.html5tricks.com/8-cool-css3-button-animation.html][https_www.html5tricks.com_8-cool-css3-button-animation.html]  
原文作者：[html5tricks][HTML5] – 超人

[d8ac997ab443b1505a7e5e115b19730c.png]: /images/20221120/de741a44e505423093d5706c98013077.png
[Link 1]: http://link.zhihu.com/?target=https%3A//codepen.io/ben_jammin/pen/syaCq
[3cbc67abf440eb8fde4f499eeab25a02.png]: /images/20221120/c37079e5d27a4d068260c2d2fe09539d.png
[Link 2]: http://link.zhihu.com/?target=http%3A//codepen.io/FelipeMarcos/pen/tfhEg
[28733443352bd64545f66c787e084c8c.png]: /images/20221120/2291e01febbe42579a7a4a513e94a0a1.png
[Pen]: http://link.zhihu.com/?target=https%3A//codepen.io/timwagner/pen/pAecq
[Link 3]: http://link.zhihu.com/?target=https%3A//codepen.io/monkeyraptor/pen/Iyvor
[3d3c1c3dc33cb263dca45fac0d3def88.png]: /images/20221120/cb72b1e356024e9589270be467932b3d.png
[Link 4]: http://link.zhihu.com/?target=http%3A//1stwebdesigner.com/flat-design-websites/
[Link 5]: http://link.zhihu.com/?target=https%3A//codepen.io/AlanCollins/pen/EwDar
[653da85e2170ef9a424116e0d545515d.png]: /images/20221120/4f7f5dbf4ea449ebb427761ac815df97.png
[Link 6]: http://link.zhihu.com/?target=http%3A//codepen.io/Stanssongs/pen/GgvbD
[GitHub]: http://link.zhihu.com/?target=https%3A//github.com/stanwmusic/css-social-buttons
[Link 7]: http://link.zhihu.com/?target=http%3A//1stwebdesigner.com/free-social-media-icons/
[b33b2d51bc5427cfb52caa7f850e36a1.png]: /images/20221120/64ac74c933fc4eaeaade8aca1ddd2ab2.png
[Link 8]: http://link.zhihu.com/?target=http%3A//codepen.io/ayamflow/pen/Dufxr
[75b73286e2f68555d82f0821509d7e5b.png]: /images/20221120/f66397ce186f4160bdf91daed628b721.png
[Link 9]: http://link.zhihu.com/?target=https%3A//codepen.io/electerious/pen/rroqdL
[01d5e33b3493c58ba350783d257293b9.png]: /images/20221120/f074272570a841d9ae779f52441e3de8.png
[Link 10]: http://link.zhihu.com/?target=http%3A//codepen.io/joehenriod/pen/QEXJAq
[e9cbd8b128f543c56be5dd725b806deb.png]: /images/20221120/418e0581470649408a6975ce11d75fe4.png
[SCSS]: http://link.zhihu.com/?target=https%3A//codepen.io/jgthms/pen/EjxBdR
[80bffce9b865dfacdfe502176f4a1484.png]: /images/20221120/d503bc4a4ce94656b9094763130c0fe8.png
[Link 11]: http://link.zhihu.com/?target=https%3A//blog.mozilla.org/opendesign/
[Link 12]: http://link.zhihu.com/?target=http%3A//codepen.io/slimsmearlapp/pen/HJgFG
[CodePen]: http://link.zhihu.com/?target=http%3A//codepen.io/search/pens%3Fq%3Dcss3%2Bbuttons%26limit%3Dall%26type%3Dtype-pens
[https_blog.csdn.net_hzp666_article_details_69221364]: https://blog.csdn.net/hzp666/article/details/69221364
[10 Free Code Snippets for Creating Beautiful CSS Buttons]: http://link.zhihu.com/?target=http%3A//1stwebdesigner.com/free-code-snippets-css-buttons/
[Jake Rocheleau]: http://link.zhihu.com/?target=http%3A//1stwebdesigner.com/author/jake-rocheleau/
[IT]: http://link.zhihu.com/?target=http%3A//weibo.com/itlion114/
[http_www.jianshu.com_p_430817f5a]: http://link.zhihu.com/?target=http%3A//www.jianshu.com/p/430817f5adee
[html5tricks]: http://www.html5tricks.com/
[CSS3]: https://www.html5tricks.com/tag/css3%E6%8C%89%E9%92%AE
[css3-share-button-animation]: /images/20221120/277467ed09764b4686ac140784b6f079.png
[css3-share-button-animation 1]: https://www.html5tricks.com/demo/css3-share-button-animation/index.html
[Link 13]: https://www.html5tricks.com/css3-share-button-animation.html
[HTML5]: https://www.html5tricks.com/
[html5-css3-canvas-button]: /images/20221120/52f61e3356fc47c483eb157a8eb6dbc7.png
[html5-css3-canvas-button 1]: https://www.html5tricks.com/demo/css3-colorful-button/index.html
[Link 14]: https://www.html5tricks.com/html5-css3-canvas-button.html
[CSS3 3D]: https://www.html5tricks.com/css3-3d-switch-button.html
[CSS3 1]: https://www.html5tricks.com/css3-gelatin-button.html
[pure-css3-shine-button]: /images/20221120/baf8a7c18d674e5b880b40ba5db82d7c.png
[pure-css3-shine-button 1]: https://www.html5tricks.com/demo/pure-css3-shine-button/index.html
[Link 15]: https://www.html5tricks.com/pure-css3-shine-button.html
[css3-slide-button-animation]: /images/20221120/57f9e53133ec473d8ff4fcc3f01c7da6.png
[css3-slide-button-animation 1]: https://www.html5tricks.com/demo/css3-slide-button-animation/index.html
[Link 16]: https://www.html5tricks.com/css3-slide-button-animation.html
[css3-icon-animation-button]: /images/20221120/a489599e62d34d2fb900d9e004ecc103.png
[css3-icon-animation-button 1]: http://js.itivy.com/jiaoben260/index.html
[Link 17]: https://www.html5tricks.com/css3-icon-animation-button.html
[CSS3_]: https://www.html5tricks.com/css3-button-with-icons.html
[css3-gelatin-button]: https://img-blog.csdnimg.cn/img_convert/77c1de8cdeea58e962edf7c286022b65.png
[css3-gelatin-button 1]: https://www.html5tricks.com/demo/css3-gelatin-button/index.html
[CSS3 2]: https://www.html5tricks.com/css3-simple-button-icons.html
[css3-ghost-buttons]: https://img-blog.csdnimg.cn/img_convert/9836b98858a5c300a6f22beedd52ed31.png
[css3-ghost-buttons 1]: https://www.html5tricks.com/demo/css3-ghost-buttons/index.html
[Link 18]: https://www.html5tricks.com/css3-ghost-buttons.html
[CSS3 3D_]: https://www.html5tricks.com/css3-3d-milk-style-button.html
[css3-3d-reakustuc-button]: https://img-blog.csdnimg.cn/img_convert/cf1b9e378e5be0816bddf394e957a306.png
[css3-3d-reakustuc-button 1]: https://www.html5tricks.com/demo/css3-reakustuc-button/index.html
[Link 19]: https://www.html5tricks.com/css3-3d-reakustuc-button.html
[https_www.html5tricks.com_8-cool-css3-button-animation.html]: https://www.html5tricks.com/8-cool-css3-button-animation.html