使用这20个代码片段改进Call To Action

用这20个代码片段改进cta

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

它们不只是简单的带有文字说明的矩形;它们服务于许多目的,并从各个方面使项目受益。

和其他设计的核心元素一样,它们也会受到潮流的影响。当拟物化理论占据主导地位时,带有光滑表面和阴影的按钮很受欢迎。如今,它们已经让位给了扁平的纯色按钮和漂亮的易碎鬼按钮。

更重要的是,还有另一种趋势——具有动态行为的按钮相信在不久的将来,它将取代静态组件。有那么多的选择,却没有那么多的时间。

考虑到这一点,我们已经收集了20个杰出的资源来帮助你。这个列表包括生成器、库和一些简单的代码片段,它们可以让您快速地改进和丰富按钮。

CTA按钮代码片段

Hover.css

css是一个小型的个人项目,致力于由悬停事件触发的css3驱动的效果。它们完全兼容SASS, LESS和CSS。范围包括2D转换,背景转换和其他一些。更重要的是,您不仅可以将此解决方案应用于按钮,还可以应用于链接、徽标和svg。

Hover.css

不完美的按钮蒂芙尼Rayside

蒂芙尼·瑞赛德(Tiffany Rayside)与我们分享了一个包含六个按钮的小代码片段。每一幅画的边框风格都与众不同。作者运用粗线、虚线、粗线等方法对元素进行了梳理。更重要的是,每个物体都有一个微妙的阴影,轻轻地把它从背景中分离出来。

不完美的按钮

创造性的按钮样式

作者充分利用了现代CSS3的特性。这个系列包含了大量的样式和效果,这些样式和效果赋予了按钮一种可爱的感觉。每个解决方案都可以与悬停或单击事件一起应用。

创造性的按钮样式

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

大卫·康纳创造了五种不同的按钮悬停效果,非常惊人。它们看起来光滑、清脆、优雅,与任何现代构图完美搭配。

按钮悬停效果的集合

CSS:鼠标悬停提示由Scott Polhemus

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

CSS悬停提示

倾斜的按钮混合由伊莱惠誉

Eli Fitch与他人分享了一个由css驱动的混合按钮,它可以将任何乏味的长方形物体变成甜美时尚的组件,具有动态的行为、华丽的外观和倾斜的感觉。该方法是在梯度和边界的帮助下创建的。

斜按钮Mixin

Sass Flat-Button发电机

Sass平面按钮生成器是一个Sass mixin,它利用伪类来生成漂亮的平面按钮,具有明亮的外观、整洁的结构和自定义图标。后者可以放在左边,也可以放在右边。你也可以选择锐角和圆角。

Sass平面按钮发生器

按钮

button是一个在SASS和Compass帮助下建立的库。它的目的是在为接口生成cta时给您一些自由。左侧的面板允许您操作边框、辉光、圆角、下拉菜单、图标等。

按钮

反应SVG按钮

React SVG按钮是另一个编写器,它具有方便的可视界面,允许您根据选择的标准创建按钮。调整所有设置并将结果代码复制到右边的窗口中,以继续工作。

反应SVG按钮

时尚的社交按钮由克里斯Deacy

他们是脆,优雅和平坦。每一个都有一个光滑的形状,宽敞的感觉和坚实的象征在中心。这个包装的主要特点在于它的配套效果,给每件商品增添了一定的情趣。

时尚的社交按钮

bartekd设计的12个花哨的纽扣

虽然设置看起来有点原始和过于简化,但真正重要的是支持翻转效果。一切都是建立在CSS的顶部,所以材料是轻量级和快速。注意,它存在一些浏览器兼容性问题。

12的按钮

CSS最喜欢的按钮

Jamie Coulter的CSS favorite Button是一个成功的实验,它展示了一个普通的“favorite”按钮的精彩变化。后者拥有一个可爱的,甜美的和优雅的外观。艺术家只是利用CSS,抛弃了所有的图像有利于生产力。它们之间有两种状态和一个奇特的动画。

CSS最喜欢的按钮

按钮悬停效果由Kyle Brumm

Kyle Brumm展示了一组标准的幽灵按钮,这些按钮添加了一些细微的效果。欢迎您更改颜色、标题和默认设计。有很多变体可以很好地与任何设备配合使用,包括那些基于触摸屏的设备。

按钮悬停效果

Quttons

Quttons是一个以量子纸为理念的项目,这是谷歌材料设计语言的原则之一。该产品应该适应新的内容和适应各种屏幕,而不需要太多的努力。它明智地改变了它的大小和形状。只有三个对象。但是,您可以生成任意多个。

Quttons

进步按钮

进度按钮是功能和实用的解决方案,其中每个项目结合两个功能。首先,它们是吸引注意力的按钮,使链接看起来很重。其次,它们提供了一个进度条来显示进程的当前状态。该团队已经创造了近20个变种,可以收缩、扩展、旋转、翻转和滑动。

进步按钮

幻灯片社交按钮

艺术家在纽扣上增加了趣味性,让它们看起来更友好、更受欢迎。他利用了CSS3中可用的转换和转换、视网膜显示的理想图标字体和响应式基础来为每个元素创建令人震惊的转换。它们在IE8和ie9以及触摸屏设备中也会优雅地退化。

幻灯片社交按钮

CSS3微软现代按钮

CSS3微软的现代按钮看起来雄伟壮观。这位艺术家试图模仿微软Metro设计中固有的图形。因此,您可以获取一个轻量级库,其中充满了有用的内容。每个项目都是跨浏览器兼容的,并与引导程序支持的接口协作。

CSS3微软现代按钮

Zocial

来点老派的东西怎么样?Zocial是一个经过时间检验的将社交媒体添加到你的项目中的方法:它已经增强了许多网站。当然,按钮看起来有点过时,表面光滑,结构单调。然而,它们是可行和可靠的。有100个CSS3字体界面和矢量按钮。

Zocial

形式在按钮

这位艺术家把扣子扭了一下。每个组件都通过额外的功能进行了改进。例如,搜索图标从一个小方块变成一个相对较大的搜索字段,而其他图标则转换为文本输入。该解决方案适用于遵循材料设计原则的项目。

形式在按钮

按钮效果:ChouWenKwei

这支笔有五个小巧而优雅的按钮效果。艺术家通过处理边框来达到视觉上有趣的效果。虽然技术相当简单,但触摸屏设备不支持多个版本。

按钮效果

结论

请注意,微小的影响可以产生巨大的差异。具有动态行为的按钮总是能吸引眼球,看起来更容易点击,更有吸引力。重要的是,在大多数情况下,解决方案是在CSS3的帮助下创建的。当然,这是由于缺乏完整的浏览器兼容性,然而,这只是一个时间问题,直到这个问题消失。

您希望在接口中实现哪种类型的按钮?它们是光滑的、扁平的还是动态的?它们有副作用吗?

2020-01-23 17:09
相关热门