网站按钮设计：CSS指南

网站的每个方面都很重要。我们报道了一些重量级人物，从表格创作和标题设计来交通指标跟踪谁将前往您的站点，他们将停留多长时间，以及他们是否回来。同样重要吗？细节。颜色选择和布局很重要。简洁和流线型设计是优先考虑的。但也有一个经常被忽视的组件，当它做得好的时候并不突出，但当它没有抓住要点时，它可以忽略不计：按钮。用户对您的网站形成总体印象50毫秒在他们到达后，你不能有任何不合适的东西，包括一个零散的按钮。

您的网站按钮不仅仅是窗户敷料;它们是必不可少的设计元素，帮助讲述您的品牌的故事，并指导访问者更接近您的产品或服务。

对网站按钮设计感到好奇?不知道如何(或从哪里)开始?我们会帮你的。

好vs坏按钮设计

设计网站按钮没有绝对的对错之分。有经验的开发人员知道，为了成功实现目标，几乎所有规则都可以被打破。然而，有一些最佳实践可以帮助您设计按钮，而无需进行太多的尝试和错误。

下面，我们概述了一些好的和坏的按钮设计实践，给你一个速成课程，创造有吸引力的按钮，就像专业人士一样。

好的按钮设计

• 清楚：按钮文本和颜色需要清晰，锐利，易于理解。过去几年的网络设计趋势倾向于平的按钮设计，所以这是一个安全的风格。避免复杂，花哨的按钮这会分散读者的注意力。
• 简洁的：按钮上的最小文本是理想的。一个词是目标，最多两个词。任何更多的都会变得麻烦和混乱。如果你在削减按钮文本时遇到困难，请后退一步，问问自己“我现在想让读者在页面上做什么？”脑海中出现的第一个单词可能是动词。接下来是一个时间副词为简单和简洁的按钮文本。
• 上下文：这个按钮通向哪里?它是做什么的?混乱的按钮不会被点击。如果你有一个标签为“现在购买”的按钮，它应该会引导用户进入一个页面，在那里用户可以输入他们的卡的详细信息，而不是另一个页面描述他们想购买的产品。

糟糕的按钮设计

• 不响应：在网页设计中，移动体验是至高无上的。很有可能你是在台式机上设计按钮的，所以你也必须手动检查你的按钮在移动设备上是否正确。如果你不这么做，你的按钮可能会太大或太小，而不适合手机屏幕，这将显著影响你的点击率。幸运的是，大多数CMS工具都有一个切换按钮，可以让你在多个屏幕类型中预览网页元素，这样你就可以相应地调整按钮设计。
• 没有颜色：明亮、粗体的按钮对cta来说非常好，因为它们会引导访问者的视线转向页面上的关键元素。记住，你的网页是一个旅程，你放置在网页上的按钮应该像一张地图。如果没有全色按钮，您的读者可能很难通过页面并转换。
• 错位：同样，放错的按钮也会让访问者感到困惑。如果你的按钮没有设置在一个区域，让读者了解更多或购买，一个单独的按钮在段落中间不会有帮助，实际上可能会使事情变得更糟。保持简单，只在需要访问者采取行动的地方添加按钮。这些区域的一些例子包括:靠近特性和优点部分，在页面的页眉和页面的底部。

按钮设计思想

在开始建立自己的按钮之前，值得一看一下一些免费模板来吸引那里的内容，适合您的风格，以及对您的网站最有意义的是什么。

vecteezy.

这些免费的按钮简单、简洁，颜色鲜艳，让用户很容易找到他们想要的东西并点击。

设计者还添加了小图标的改进的上下文 - 例如，“播放视频”按钮具有小的“播放”符号，搜索按钮具有放大镜。

Freepik.

Freepik的这些按钮稍有创意，但绝对引人注目。使用双色调的颜色有助于吸引用户，而图标的添加使访问者更容易找到他们想要的东西。

在这里，背景是王子;虽然按钮上的单词不会减损它们的影响，但该文本只是每个按钮上的三个上下文提示中的一个。聪明的。

如何创建网站按钮

如果你想设计自己的按钮呢？虽然基本按钮可以发挥作用，但您也可以选择更深入地挖掘并添加有趣的效果—从鼠标悬停在按钮上时改变颜色的按钮到带有阴影、禁用按钮或按钮组的按钮。

你最好的建筑赌注？按钮设计CSS（层叠式纸张）．CSS是一个定义和描述元素在HTML中显示的工具。使用CSS编辑器，您可以从标题和页脚到侧栏和按钮自定义网页的每个方面。

您可以为任何网站添加CSS条件，但不同的工具需要不同的专业水平。如果你刚刚开始，WordPress是一个安全的赌注-该平台使访问、添加和调整CSS设置以及构建新按钮变得容易。这是怎么做的。

步骤1：前往WordPress仪表板并单击外观>自定义。

图片来源

步骤2：接下来，转到左侧工具条的底部并单击额外的CSS.．

图片来源

这将打开一个CSS编辑器页面，您可以在其中输入任何自定义CSS代码。

图片来源

既然你来到了这里，你应该添加什么来创建伟大的按钮?这取决于你要找什么。让我们来看看如何修改按钮属性。

CSS按钮设计

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

看到这支笔网站的CSS按钮克里斯蒂娜·佩里康(@hubspot） 在CodePen．

彩色的按钮

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

看到这支笔彩色的按钮克里斯蒂娜·佩里康(@hubspot） 在CodePen．

圆角

方形角并不总是理想的。使用圆角边框属性要将边框半径更改为按钮的角落 - 像素计数（或百分比）越高，角落越多。

看到这支笔圆角克里斯蒂娜·佩里康(@hubspot） 在CodePen．

彩色边框

使用边界性质给你的按钮彩色边界有白色背景。

看到这支笔彩色边框克里斯蒂娜·佩里康(@hubspot） 在CodePen．

Hoverable按钮

使用：悬停选择器要在用户将鼠标移到它时更改按钮的样式。使用过渡持续时间属性来改变悬停效果的工作原理。

看到这支笔Hoverable按钮克里斯蒂娜·佩里康(@hubspot） 在CodePen．

阴影按钮

使用箱影子要将阴影添加到您的按钮。请注意HTML略微更改以渲染按钮后面的阴影。

看到这支笔阴影按钮克里斯蒂娜·佩里康(@hubspot） 在CodePen．

禁用按钮

在某些情况下，您可能需要禁用按钮。使用不透明度特性为您的按钮添加透明度，从而创建“禁用”外观。你也可以添加光标属性使用按钮鼠标时未允许的值显示“无停车标志”。请注意HTML略有更改以呈现此按钮的已禁用功能。

看到这支笔禁用按钮克里斯蒂娜·佩里康(@hubspot） 在CodePen．

网站按钮制造商

有时候，获得帮助比从头开始构建按钮更容易。考虑到你网站上按钮的数量，以及对风格和形式一致性的需求，有必要考虑可扩展的工具，让你简化按钮的创建，并随着网站的发展不断迭代。在按钮生成器中，无论是免费的还是付费的，最好的可定制功能包括颜色、大小、边框、背景和文本。这些功能将为您提供创建完美网站按钮所需的控制。

1.Hubspot的CMS

HUBSPOT CMS是您所需的一切，您需要建立伟大的网站。购买每月订阅授予您访问满足您需求的设计网站和捕获访客利息。您可以通过将您的网站连接到营销解决方案来进一步扩展所有努力工作HubSpot的营销中心以确保您的设计是随时间交付的。从一大堆预先构建好的按钮模板和样式中选择，为您的站点获得完美的外观。

2.巫师

Wix是一个付费CMS平台，使网络设计轻松，具有美观，直观的网站功能和功能。虽然您没有使用Wix完成完整的按钮自定义，但如果您需要从框中运行的清除，上下文选项，则是一个坚实的起点。

免费网站按钮

3.WordPress

编码CSSWordPress这很简单，网站平台还附带了大量的网站模板和插件。虽然WordPress中的定制按钮需要更多的工作，但如果您对基本编码感到满意，则值得考虑。因为WordPress是开源的，所以您可以免费使用它，或者您可以为更具体的功能购买WordPress计划。

4.最佳CSS按钮生成器

最好的CSS按钮生成器是一个免费的工具，让你自定义你的网站按钮的外观。从品牌调色板中的绿色阴影到按钮内文本背后的阴影，选择一切。当你完成设计时。只需点击“获取代码”按钮，复制和粘贴您的CSS代码到“自定义额外的CSS”领域在您的网站。

5.CSS按钮生成器

另一个类似命名的平台，CSS按钮生成器是一个免费的，直接的工具，可创建美丽的CTA按钮。它拥有Button Creator应该拥有的所有基本功能，但是这是一个唯一的是它的“悬停”自定义功能。这意味着当您使用CSS按钮生成器时，按钮将具有专业制作网站的动态功能。

按钮底线

第一印象很重要。用户在到达时几乎立即在您的网站上形成了一般意见 - 因此值得确保您网站的每个方面都在一起工作。

按钮是关键的背景元素;定制的、清晰的、简洁的和上下文相关的按钮设计选择可以帮助你的网站获得成功。

编者按:本文最初发表于2020年5月，已进行了全面更新。