广东网站建设:使用这20个代码片段改进号召性用语

2019.08.09 mf_web

171

按钮是任何界面中最重要的元素之一。他们突出了链接和功能,为观众提供了明显的视觉线索。它们在提高转换率方面发挥了重要作用,更不用说它们增强用户体验的能力,使其更直观和易懂。

它们不仅仅是带字幕的简单矩形; 它们服务于许多目的,并从各方面受益。

广东网站建设与设计中的任何其他核心元素一样,它们受趋势的影响。虽然skeuomorphism掌握了缰绳,但有光泽表面和阴影的按钮很受欢迎。如今,他们已经让位于平面纯色按钮和漂亮的脆弱鬼按钮。

更重要的是,还有另一个趋势 - 具有动态行为的按钮被认为将在不久的将来取代静态组件。有很多可供选择,但没有那么多时间。

考虑到这一点,我们已经收集了20个优秀的资源来帮助您解决这个问题。该列表涵盖了生成器,库和简单的代码片段,可让您快速改进和丰富按钮。

CTA按钮代码片段

Hover.css

Hover.css是一个小型的个人项目,专门用于由悬停事件触发的CSS3驱动的效果。它们与SASS,LESS和CSS完全兼容。范围包括2D过渡,背景过渡和其他一些过渡。更重要的是,您不仅可以将解决方案应用于按钮,还可以应用于链接,徽标和SVG。

Hover.css

Tiffany Rayside不完美的按钮

Tiffany Rayside与我们分享了一个小代码片段,其中包含六个令人耳目一新的按钮。边界风格中的每一个都与其他人区别开来。作者借助于粗糙的边框,点缀的粗边框,虚线粗边等来修饰元素。更重要的是,每个物体都有一个微妙的阴影,轻轻地将它与背景分开。

不完美的按钮

创意按钮样式

作者充分利用了现代CSS3功能。该系列包含大量款式和效果,让纽扣成为可爱的热情。每个解决方案都可以与悬停或点击事件同时应用。

创意按钮样式

大卫康纳的按钮悬停效果的集合

David Conner创造了五种不同的按钮悬停效果,非常棒。它们看起来光滑,清新,优雅,与任何现代作品完美搭配。

按钮悬停效果的集合

CSS:由Scott Polhemus提供的悬停技巧

Scott Polhemus混合了CSS3中提供的过渡和动画,从而产生了一小组轻量级和引人注目的输入/输出效果。它们为图形添加了微妙的动态触感。该技术不仅适用于按钮,也适用于基本的线性分页和控制。

CSS悬停提示

Slanty Button Mixin作者:Eli Fitch

Eli Fitch与其他人共享一个CSS驱动的按钮混合,将任何无聊的矩形物体转变为甜美时尚的组件,具有动态的行为,出色的外观和慵懒的感觉。该方法是在渐变和边界的帮助下创建的。

Slanty Button Mixin

Sass平按钮发生器

Sass平键发生器是一种SASS mixin,它利用伪类来制作漂亮的平面样式按钮,具有明亮的外观,整洁的结构和自定义图标。后者可以放在左侧或右侧。您还可以选择锐角和圆角。

Sass平面按钮发生器

纽扣

按钮是在SASS和Compass的帮助下构建的库。它旨在为您提供一个为界面生成CTA的自由。左侧的面板允许您使用边框,发光,圆角,下拉,图标等因素进行操作。

纽扣

反应SVG按钮

React SVG Buttons是另一个具有方便的可视界面的作曲家,可让您根据所选标准创建按钮。调整所有设置并将结果代码复制到右侧窗口中以继续工作。

反应SVG按钮

时尚的社交按钮Chris Deacy

它们清脆,优雅,平整。每个人都有一个光滑的形状,宽敞的感觉和中心的坚实象征。包装的关键特征在于其伴随的效果,为每个项目提供了一定的香料。

时尚的社交按钮

bartekd的12个花式按钮

尽管该集合看起来有点原始且过于简单,但支持翻转效果才是真正重要的。一切都建立在CSS的顶部,以便材料轻巧,快速。请注意,它会遇到一些浏览器兼容性问题。

12个花式按钮

CSS收藏夹按钮

Jamie Coulter的CSS收藏按钮是一个成功的实验,显示了常规“最喜欢”按钮的精彩变形。后者拥有可爱,甜美和精致的外观。艺术家只利用CSS,放弃所有图像以支持生产力。它们之间有两种状态和奇特的动画。

CSS收藏夹按钮

ChouWenKwei的按钮效果

这支笔包括五个微小但优雅的按钮效果。艺术家用边框操纵以获得视觉上有趣的结果。尽管该技术相当简单,但触摸屏设备不支持多个版本。

按钮效果

结论

请注意,很少有效果会产生很大的影响。具有动态行为的按钮总是引人注目,看起来更具可点击性和吸引力。最棒的是,在大多数情况下,解决方案是在CSS3的帮助下创建的。当然,这充满了缺乏完整的浏览器兼容性,然而,这个问题被遗忘只是时间问题。

广东网站建设

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP