欢迎移步我的博客阅读：《20 个交互非常棒的按钮代码》
你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现（如导航栏，版权信息）的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA （Call-to-action：行为召唤）能帮你获得更多的潜在客户和促进业务的扩展。
HOST
按钮的开发需要注意它的形状、颜色、空间、排版和前景，这些都很重要。前四个主要是依赖于网页的主题，而最后一个则是取决于你需要达成的目标。例如，你可以在用户点击后，等待的时间里在按钮上加入转轮点亮的动画；又或是，加入一些更吸引眼球的动画效果。如此一来，添加动画效果可以使按钮产生的效果最大化。那么，接下来为你介绍这 20 个很棒的按钮代码，它们能使按钮更加丰富，且用户体验超好。
波浪形按钮
<a href="http://codepen.io/suez/pen/aOgMxy">
</a>
作者：Nikolay Talanov
用 Canvas 和 HTML5 制作的粒子状按钮
<a href="http://codepen.io/igcorreia/pen/vEzmyV">
</a>
作者：Ignacio Correia
用 Sass 制作的胶状按钮
<a href="http://codepen.io/macreart/pen/mdCHA">
</a>
作者：François Lesenne
3D 弹出效果的按钮
<a href="http://codepen.io/ashleynolan/pen/djpCG">
</a>
作者：Ashley Nolan
“Material Design” CSS 动画效果的按钮
<a href="http://codepen.io/jonbrennecke/pen/xbojLg">
</a>
作者：Jon Brennecke
具有 3D 效果的按钮
<a href="http://codepen.io/drus/pen/IKzqG">
</a>
作者：drus unlimited
关闭按钮效果
<a href="http://codepen.io/JonasB/pen/MYaMBz">
</a>
作者：Jonas Badalic
一些时尚的切换效果按钮
<a href="http://codepen.io/ashleynolan/pen/wBppKz">
</a>
作者：Ashley Nolan
纯 CSS3 效果的按钮
<a href="http://codepen.io/overlyenginnered/pen/myZVYv">
</a>
作者：Overly Engineered
Hover 效果
<a href="http://codepen.io/deep1808/pen/aOQqqa">
</a>
作者：Deep
Jelly 按钮
<a href="http://codepen.io/ayamflow/pen/Dufxr">
</a>
作者：ayamflow
Hover 效果的按钮
<a href="http://codepen.io/thejamespower/pen/OVNYLL">
</a>
作者：James Power
Gaming Button With Hover Effect
<a href="http://codepen.io/kaigth/pen/qiDJL">
</a>
作者：kaigth
分享按钮
<a href="http://codepen.io/onediv/pen/dkFco">
</a>
作者：Vincent Durand
Flipside
<a href="http://codepen.io/hakimel/pen/ZYRgwB">
</a>
作者：Hakim El Hattab
粒子按钮效果
<a href="http://codepen.io/timohausmann/pen/icCer">
</a>
作者：Timo Hausmann
CSS3 按钮示例
<a href="http://codepen.io/volusion/pen/AgqBf">
</a>
作者：Volusion Services
很棒的按钮样式和效果
<a href="http://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/">
</a>
作者：Mary Lou
创意按钮样式
<a href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/">
</a>
作者：Mary Lou
3D 动画效果的按钮
<a href="http://codepen.io/1forhlol/pen/VYrxOP">
</a>
作者：Zachary Minner
网友评论