网站的每个方面都很重要。我们已经涵盖了一些大的冲击,从表单创建和标题设计到跟踪谁正在访问你的网站,他们停留多久,以及他们是否回来的流量指标。

同样重要?细节。颜色选择和布局。简单性和简化的设计是一个优先事项。但是,还有一个经常被忽视的组件,在做得正确时并不突出,但可以在错过标记时侧面的经验:按钮

让用户对你的网站形成一个总体印象50毫秒他们来了之后,你不能把任何东西放得乱七八糟——包括一个丢失的按钮。

现在下载:免费介绍指南HTML和CSS

从点击按钮获取更多信息或链接到产品页面,按钮请求客户服务或快速添加商品到购物车,您的网站按钮不仅仅是橱窗装饰;它们是必要的设计元素,有助于讲述你的品牌故事,引导访客更接近你的产品或服务。

对网站按钮设计感兴趣?不确定如何(或从哪里)开始?我们帮你搞定了。

按钮的设计思想

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

  1. 清晰的:按钮文字和颜色要清晰、锐利、容易理解。
  2. 简洁的。按钮上最少的文字是理想的。一个词是目标,最多两个词。再多一点就麻烦了。
  3. 上下文这个按钮通向哪里?它是做什么的?令人困惑的按钮不会被点击。

在你开始构建自己的按钮之前,有必要看看一些免费的模板,看看哪些适合你的风格,哪些对你的网站最有意义。

Vecteezy

按钮的设计思想很有条理

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

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

Freepik

按钮设计思想自由

这些社交按钮来自Freepik更抽象一点,但绝对吸引眼球。双色系的使用有助于吸引用户,而每个社交网站的符号-搭配其相关配色方案-使访问者很容易找到他们想要的东西。

在这里,情境是最重要的;虽然按钮上的文字并没有减少它们的影响,但文字只是每个按钮上的三种上下文提示之一。聪明。

如何设计一个按钮

如果你想自己设计按钮怎么办?虽然基本按钮可以达到目的,但你也可以选择更深入地挖掘并添加有趣的效果——从鼠标悬停时改变颜色的按钮到有阴影的按钮、禁用的按钮或按钮组。

你最好的选择是什么?按钮设计CSS(层叠样式表)。CSS是一种定义和描述元素如何在HTML中显示的工具。使用CSS编辑器,你可以自定义网页的每个方面,从页眉和页脚到侧边栏和按钮。

虽然您可以向任何网站添加CSS条件,但不同的工具需要不同级别的专业知识。如果你刚刚开始,WordPress是一个安全的bet - 该平台可以轻松访问,添加和调整CSS设置并构建新按钮。就是这样。

首先,进入你的WordPress仪表盘并点击外观>定制

如何设计一个按钮wordpress

下一步,头部到左侧工具条的底部并单击额外的CSS

如何设计一个按钮wordpress

这将弹出一个CSS编辑器页面,在这里您可以输入任何自定义CSS代码。

如何设计一个按钮wordpress

现在你已经在这里了,你应该添加什么来创建伟大的按钮呢?这取决于你想要什么。让我们来看看如何修改按钮属性。

CSS按钮设计

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

.button {

background - color: # 4 caf50;/ * * /

边界:没有;

颜色:白色;

填充:15 px 32 px;

text-align:中心;

文字修饰:没有;

显示:inline-block;

字体大小:16 px;

}

彩色的按钮

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

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

圆角

正方形的角并不总是理想的。使用这个特性属性将按钮的边界半径更改为圆角——像素数(或百分比)越高,圆角就越圆润。

.button {border - radius: 2 px;}

颜色的边界

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

.button {

背景颜色:白色;

颜色:黑色;

边框:2px固体#4CAF50;/ * * /

}

Hoverable按钮

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

.button {

transition-duration: 0.4秒;

}

.button:{徘徊

background - color: # 4 caf50;/ * * /

颜色:白色;

}

阴影按钮

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

.button1 {

Box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,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的CMS是你的一站式商店,你需要建立伟大的网站。设计适合你的需求和吸引访问者兴趣的网站——然后将你的HubSpot网站与流量和营销解决方案连接起来,以确保你的设计能够随着时间的推移而交付。

从一系列预建的按钮模板和样式中选择,为您的网站获得完美的外观。

2.WordPress

按钮设计wordpress

CSS编码在WordPress很简单,而且网站平台也提供了大量的网站模板和插件。虽然WordPress中的自定义按钮需要更多的工作,但如果你能适应基本的编码,这是值得考虑的。

3.款

按钮设计款

使网站设计容易与伟大的网站功能和功能。虽然使用Wix无法实现完整的按钮定制,但如果您需要清晰的、上下文相关的、开箱即用的选项,那么这是一个可靠的起点。

按键底线

第一印象很重要。当用户到达你的网站时,他们几乎马上就会对你的网站有一个大致的看法——所以确保你的网站的各个方面都能相互配合是值得的。

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

新的文字-动作

css的介绍

最初发布于2020年5月11日早上7:00:00,更新于2020年5月11日

主题:

网站设计