20 个交互非常棒的按钮代码

欢迎移步我的博客阅读:《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

原文链接

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 138,430评论 20 591
  • 城外的人想进城,城里的人想出城。这已经是一句被人用到快烂了的句话。因为这一句话实在是太有道理了。 方鸿渐,书中的主...
    日月同光阅读 59评论 0 0
  • 在现在的社会生活节奏中,有几个人不是压力负荷下工作?如何把这些压力负转化正? 任何会伤害身体或造成细胞损坏的状态,...
    一只喜欢营养的兔子阅读 37评论 0 0
  • 爸爸生日 却没能在他身边陪他过 这几年一身戾气 多久没有写写文字提醒自己 陪伴才是最最重要的啊 往事不可追 要感恩...
    锦瑟默然阅读 40评论 0 0
  • 1.我对此工具卡的理解? 同等对待,对于多子女家庭犹其重要。不偏袒小的,觉得孩子小就更需要保护,以大让小,这不公平...
    陌上花开6361988阅读 125评论 0 0