网站按钮设计：您的CSS指南

网站的每个方面都很重要。我们已经介绍了一些大的成功案例，从表单创建和标题设计到跟踪谁访问你的网站的流量指标，他们在你的网站停留多久，以及他们是否会回来。

同样重要的是吗?细节。颜色选择和布局很重要。简洁和流线型的设计是优先考虑的。但还有一个经常被忽视的元素，如果做得好，它并不突出，但如果它错过了目标，就会偏离体验:按钮．

让用户对你的网站形成一个总体印象50毫秒到达后，您无法承担任何地方 - 并且包含一个杂散的按钮。

从按钮点击以点击更多信息或链接到产品页面，按钮要求客户服务或快速将物品添加到购物车，您的网站按钮不仅仅是窗户敷料;它们是必不可少的设计元素，帮助讲述您的品牌的故事，并指导访问者更靠近您的产品或服务。

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

按钮的设计思想

虽然按钮设计没有黄金标准，但有一些简单的指导原则:

1. 清楚：按钮文本和颜色需要清晰，锐利，易于理解。
2. 简洁的．按钮上的最小文本是理想的。一个词是目标，最多两个字。任何繁琐又令人困惑。
3. 上下文：按钮在哪里领先？它是什么人？令人困惑的按钮不会单击。

在你开始创建自己的按钮之前，有必要看看一些免费的模板，了解一下那里有什么，什么适合你的风格，什么对你的网站最有意义。

Vecteezy

Vecteezy免费按钮简单，准确，颜色鲜艳，用户很容易找到他们想要的东西并点击。

设计师还添加了小图标来改善环境——例如，“播放视频”按钮有一个小的“播放”符号，搜索按钮有一个放大镜。

Freepik

这些社交按钮Freepik稍微抽象一点，但绝对醒目。使用两种色调的颜色有助于吸引用户，而添加每个社交网站的符号——与其相关的配色方案相匹配——使访问者很容易找到他们想要的东西。

在这里，语境为王;虽然按钮上的文字并没有降低它们的影响，但文字只是每个按钮上的三个上下文线索之一。聪明。

如何设计一个按钮

如果你想设计自己的按钮怎么办？虽然基本按钮服务于此目的，但您也可以选择更深入挖掘并添加有趣的效果 - 当将颜色悬停在带有阴影，禁用按钮或按钮组的按钮上时，从按钮中更改颜色的按钮。

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

虽然您可以向任何网站添加CSS条件，但不同的工具需要不同的专业知识。如果你刚刚开始，WordPress是一个安全的选择——该平台使访问、添加和调整CSS设置和构建新按钮变得容易。这是如何。

首先，点击你的WordPress仪表盘外表>定制．

来源

接下来，前往左侧侧边栏底部并单击额外的CSS．

来源

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

来源

既然你在这里，你应该添加什么来构建伟大的按钮?这取决于你在寻找什么。让我们来看看如何更改按钮属性。

CSS按钮设计

这段代码创建用户可以单击的基本绿色按钮。在本节中，我们将讨论基于按钮设计首选项编辑和定制按钮的方法。

.Button {
背景颜色：＃4CAF50;/ *绿色* /
边框：无;
颜色:白色;
填充：15px 32px;
text-align:中心;
文字修饰:没有;
显示:inline-block;
字体大小：16px;
｝

彩色的按钮

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

.button {background-color: #4CAF50;} /*绿色*/

圆角

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

.button {border - radius: 2 px;}

彩色边界

使用边框属性为按钮提供带有白色背景的彩色边框。

.Button {
背景颜色：白色;
颜色：黑色;
边框：2PX实体＃4CAF50;/ *绿色* /
｝

Hoverable按钮

使用：徘徊当用户将鼠标移到它时，选择器更改按钮的样式。使用过渡持续时间属性更改悬停效果。

.Button {
transition-duration: 0.4秒;
｝
.Button：悬停{
背景颜色：＃4CAF50;/ *绿色* /
颜色:白色;
｝

暗影按钮

使用不必属性将阴影添加到按钮。

.button1 {
框阴影：0 8px 16px 0 rgba（0,0,0.2），0 6px 20px 0 RGBA（0,0,0.19）;
｝
.Button2：悬停{
Box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24)， 0 17px 50px 0 rgba(0,0,0,0.19);
｝

禁用按钮

在某些情况下，您可能需要禁用按钮。使用不透明度属性为按钮添加透明度，创建一个“禁用”的外观。您也可以添加光标属性的值为“不允许”，当您将鼠标移到该按钮上时，将显示“禁止停车标志”。

.disabled {
透明度:0.6;
光标：未允许;
｝

创建一个更好的按钮

有时，比从头开始建立按钮更容易获得帮助。鉴于您网站上的纯粹按钮 - 以及风格和表单一致性的需求 - 值得考虑全功能的工具，让您简化按钮创建并按比例构建您的网站。

1. Hubspot CMS.

HUBSPOT CMS.您的一站式商店是您需要建立伟大网站所需的一切。设计网站，以满足您的需求和捕获访客兴趣 - 然后将Hubspot站点连接到流量和营销解决方案，以确保您的设计随着时间的推移而提供。

从大量的预构建按钮模板和样式中进行选择，为您的站点获得完美的外观。

2. WordPress.

编码CSSWordPress很简单，网站平台还附带了大量的网站模板和插件。虽然在WordPress中定制的按钮需要更多的工作，但如果你对基本的编码感到舒适，这是值得考虑的。

3. Wix.

Wix.使用卓越的网站特性和功能使网络设计轻松。虽然您没有使用wix完成按钮自定义，但如果您需要从框中工作的清除，上下文选项，则是一个坚实的起点。

按钮底线

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

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