重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

因为专注,所以专业

网站按钮设计:你的 CSS 指南

您网站的每个方面都很重要。我们已经介绍了一些重要的访问者,从表单创建标题设计到跟踪谁访问您的网站、他们停留多长时间以及他们是否回来的流量指标。一样重要吗?细节。颜色选择和布局很重要。简单和流线型设计是重中之重。但是还有一个经常被忽视的组件,它在做得好时不会脱颖而出,但在它没有达到目标时可能会影响体验:按钮。用户在他们到达后50 毫秒就对您的网站形成了总体印象,因此您不能有任何不合适的地方——包括一个流浪按钮。
您的网站按钮不仅仅是橱窗装饰;它们是必不可少的设计元素,有助于讲述您的品牌故事并引导访问者更接近您的产品或服务。
对网站按钮设计感到好奇吗?不确定如何(或从哪里)开始?我们已经为您提供了保障。

好与坏按钮设计

设计网站按钮没有绝对正确或错误的方法。有经验的开发人员知道,几乎所有的规则都可以打破以成功实现目标。但是,有一些最佳实践可以帮助您设计按钮而无需过多的反复试验。
下面,我们概述了一些好的和坏的按钮设计实践,为您提供有关创建像专业人士一样有吸引力的按钮的速成课程。

良好的按钮设计

  • 清晰:按钮文字和颜色需要清晰、鲜明且易于理解。过去几年的网页设计趋势倾向于扁平按钮设计,所以这是一种安全的尝试风格。避免可能分散读者注意力的复杂、花哨的按钮
  • 简洁:按钮上的最少文字是理想的。一个字是目标,最多两个字。再多就会变得麻烦和混乱。如果您在缩减按钮文本时遇到问题,请退后一步,问问自己“我希望读者现在在页面上做什么?” 想到的第一个词可能是动词。用一个时间副词来表示简单和简洁的按钮文本。
  • 上下文:按钮通向何处?它有什么作用?令人困惑的按钮不会被点击。如果您有一个标记为“立即购买”的按钮,它应该指向一个页面,用户可以在其中输入他们的卡片详细信息,而不是另一个描述他们想要购买的产品的页面。

糟糕的按钮设计

  • 无响应:在网页设计中,移动体验至高无上。您可能会在台式计算机上设计按钮,因此您必须手动仔细检查您的按钮是否也在移动设备上正确显示。如果您不执行此步骤,您的按钮对于移动屏幕来说可能太大或太小,这会显着影响您的点击率。幸运的是,大多数 CMS 工具都有一个切换按钮,可以让您跨多种屏幕类型预览网页元素,以便您可以相应地调整按钮设计。
  • 没有颜色:明亮、粗体的按钮非常适合 CTA,因为它们将访问者的注意力引导到页面上的关键元素上。请记住,您的网页是一段旅程,您放置在网页上的按钮应该充当地图。如果没有全彩色按钮,您的读者可能很难通过页面并进行转换。
  • 错位:同样,错位的按钮也会使访问者感到困惑。如果您的按钮未放置在让读者了解更多信息或进行购买的区域,则段落中间的单独按钮将无济于事,实际上可能会使情况变得更糟。通过仅在需要访问者采取行动的地方添加按钮来保持简单。这些区域的一些示例包括:功能和优势部分附近、页面标题中以及页面底部。

按钮设计理念

在开始构建自己的按钮之前,值得查看一些免费模板,以了解那里有什么、什么适合您的风格以及什么对您的网站最有意义。

素食主义者

网站按钮:Vecteezy 示例
这些免费按钮简单、切中要害且颜色鲜艳,使用户可以轻松找到他们要查找的内容并点击查看。
设计师还添加了小图标以改善上下文——例如,“播放视频”按钮有一个小的“播放”符号,搜索按钮有一个放大镜。

免费皮克

网站按钮:Freepik 示例
Freepik 的这些按钮更具创意,但绝对引人注目。两种色调的使用有助于吸引用户,而图标的添加使访问者更容易找到他们正在寻找的内容。
在这里,上下文为王;虽然按钮上的文字不会减损它们的影响,但文本只是每个按钮上的三个上下文提示之一。聪明的。

如何创建网站按钮

如果您想设计自己的按钮怎么办?尽管基本按钮可以满足其目的,但您也可以选择更深入地挖掘并添加有趣的效果——从悬停在按钮上时会改变颜色的按钮到带有阴影的按钮、禁用按钮或按钮组。
您建造的最佳选择?CSS 中的按钮设计(层叠样式表)。CSS 是一种定义和描述元素如何在 HTML 中显示的工具。使用 CSS 编辑器,您可以自定义网页的各个方面,从页眉和页脚到侧边栏和按钮。
您可以向任何网站添加 CSS 条件,但不同的工具需要不同级别的专业知识。如果您刚刚开始,WordPress是一个安全的选择——该平台可以轻松访问、添加和调整 CSS 设置以及构建新按钮。就是这样。
第 1 步:前往您的 WordPress 仪表板,然后单击外观 > 自定义。
如何设计一个按钮wordpress
图片来源
第 2 步:接下来,前往左侧边栏的底部并点击Additional CSS
在wordpress中输入按钮的css代码
图片来源
这将打开一个 CSS 编辑器页面,您可以在其中输入任何自定义 CSS 代码。
如何设计一个按钮wordpress
图片来源
既然你在这里,你应该添加什么来构建出色的按钮?这取决于你在寻找什么。让我们来看看如何更改按钮属性。

按钮设计 CSS

此代码创建了一个用户可以单击的基本蓝色按钮。您会注意到有一行 HTML 使此代码起作用。在本节中,我们将讨论使用 CSS 和 HTML 根据您的按钮设计首选项编辑和自定义该按钮的方法。
 

彩色按钮

使用background-color 属性更改按钮的背景颜色。
 

圆角

方角并不总是理想的。使用border-radius 属性将边框半径更改为使按钮的角变圆——像素数(或百分比)越高,角越圆。
 

彩色边框

使用border 属性为您的按钮设置带有白色背景的彩色边框。
 

可悬停按钮

当用户将鼠标移到按钮上时,使用:hover选择器更改按钮的样式。使用 transition-duration 属性更改悬停效果的工作方式。
 

阴影按钮

使用box-shadow 属性为按钮添加阴影。请注意 HTML 略有更改以呈现按钮后面的阴影。
 

禁用按钮

在某些情况下,您可能需要禁用按钮。使用opacity 属性为按钮添加透明度,从而创建“禁用”外观。您还可以添加值为 not-allowed的cursor 属性,以在您将鼠标悬停在按钮上时显示“禁止停车标志”。请注意 HTML 略有更改以呈现此按钮的禁用功能。
 

网站按钮制作工具

有时,获得帮助比从头开始构建按钮更容易。鉴于您网站上的按钮数量庞大——以及对样式和形式一致性的需求——值得考虑使用可扩展的工具,让您简化按钮的创建并随着网站的增长迭代您的网站。在按钮生成器中寻找的一些最好的可定制功能——无论是免费的还是付费的——是颜色、大小、边框、背景和文本。这些功能将为您提供创建完美网站按钮所需的控制权。

1. Hubspot CMS

按钮设计 hubspot cms
HubSpot CMS 是您构建优秀网站所需的一切的一站式商店。购买月度订阅可让您访问设计适合您需求并吸引访问者兴趣的网站。您可以通过将您的网站连接到HubSpot 的营销中心等营销解决方案来进一步扩展您的所有辛勤工作,以确保您的设计随着时间的推移而交付。从大量预建按钮模板和样式中进行选择,以获得完美的网站外观。

2.维克斯

按钮设计 wix
Wix 是一个付费的 CMS 平台,它通过美观直观的网站特性和功能使网页设计变得容易。虽然您无法使用 Wix 获得完整的按钮自定义,但如果您需要开箱即用的清晰、上下文选项,这是一个可靠的起点。

免费网站按钮

3. WordPress

网站按钮:wordpress 示例
WordPress 中编写 CSS很容易,网站平台还附带了大量网站模板和插件。虽然 WordPress 中的自定义按钮需要更多的工作,但如果您对基本编码感到满意,则值得考虑。因为 WordPress 是开源的,您可以免费使用它,或者您可以购买 WordPress 计划以获得更具体的功能。

4.最佳 CSS 按钮生成器

网站按钮:最好的 css 按钮生成器示例
Best CSS Button Generator 是一款免费工具,可让您自定义网站按钮的外观。选择从品牌调色板中准确的绿色阴影到按钮内文本后面的阴影的所有内容。当你完成设计。只需单击“获取代码”按钮,即可将您的 CSS 代码复制并粘贴到您网站上的“自定义附加 CSS”字段中。

5. CSS 按钮生成器

网站按钮:css 按钮生成器示例
另一个类似命名的平台,CSS Button Generator 是一个免费、简单的工具,用于创建漂亮的 CTA 按钮。它具有按钮创建者应具备的所有基本功能,但它的独特之处在于它的“悬停”自定义功能。这意味着当您使用 CSS Button Generator 时,您的按钮将具有专业网站的动态功能。

按钮底线

第一印象很重要。用户到达时几乎会立即对您的网站形成总体意见 - 因此确保您网站的各个方面都能协同工作是值得的。
按钮是关键的背景元素;定制的、清晰的、简洁的和上下文的按钮设计选择可以帮助你的网站打扮 - 并打动 - 你的网站取得成功。