web ui 套件_如何创建按钮UI套件

web ui 套件

The theme for week #6 of the Weekly Coding Challenge is:

每周编码挑战第6周的主题是：

纽扣 (Buttons)

“A button? ?” you might ask… Yes! A button! ?

“一个按钮？ ？” 您可能会问...是的！ 一个按钮！ ？

“But why?”

“但为什么？”

Because a button is one of the building blocks of any website/web application. Whether you are on Facebook or Twitter or Google, etc, you’ll always find a button that allows you to interact with the application in some way. So this week we’re going to build buttons — lots of buttons!

因为按钮是任何网站/ Web应用程序的组成部分之一。 无论您使用的是Facebook还是Twitter或Google等，您总会找到一个按钮，该按钮可让您以某种方式与应用程序进行交互。 因此，本周我们将构建按钮-许多按钮！

If you want to participate in the Challenge, feel free to build any kind of buttons: 3D buttons, buttons with ripple effect, animating buttons, etc — the sky is the limit ?. Be creative! You know how much I value creativity! ?

如果您想参加挑战赛，请随意构建任何类型的按钮： 3D按钮 ，具有波纹效果的按钮， 动画按钮等-天空是极限吗？ 创意！ 你知道我有多重视创造力！ ？

In this article we are going to build multiple buttons and put all of them in a Buttons UI Kit:

在本文中，我们将构建多个按钮并将其全部放入Buttons UI Kit中 ：

Before we move to the implementation part, let’s see the different states in which a button can be:

在转到实现部分之前，让我们看一下按钮可以处于的不同状态：

1. Default state

   默认状态

2. Hover state — when the mouse is over the button

   悬停状态-鼠标悬停在按钮上时

3. Active state — when the button is pressed

   活动状态-按下按钮时

4. Focus state — when the button is highlighted. Allowed on elements that accept keyboard events. This is used to give users that only use the keyboard some guidance as they traverse the application.

   焦点状态-突出显示按钮时。 在接受键盘事件的元素上允许。 这用于为仅使用键盘的用户在遍历应用程序时提供一些指导。

5. Disabled state

   禁用状态

We need to style the buttons to cover all these states.

我们需要设置按钮样式以覆盖所有这些状态。

Also, we’ll have three different button types: primary, secondary and tertiary and two extra sizes: large and small.

另外，我们将提供三种不同的按钮类型： primary按钮， secondary按钮和tertiary按钮，以及两种额外的大小： large和small 。

HTML (The HTML)

<div>
    <h4>Primary</h4>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-hover">Hover</button>
    <button class="btn btn-primary" disabled>Disabled</button>
    <button class="btn btn-primary btn-large">Large</button>
    <button class="btn btn-primary btn-small">Small</button>

    <h4>Secondary</h4>
    <button class="btn btn-secondary">Default</button>
    <button class="btn btn-secondary btn-hover">Hover</button>
    <button class="btn btn-secondary" disabled>Disabled</button>
    <button class="btn btn-secondary btn-large">Large</button>
    <button class="btn btn-secondary btn-small">Small</button>

    <h4>Tertiary</h4>
    <button class="btn btn-tertiary">Default</button>
    <button class="btn btn-tertiary btn-hover">Hover</button>
    <button class="btn btn-tertiary" disabled>Disabled</button>
    <button class="btn btn-tertiary btn-large">Large</button>
    <button class="btn btn-tertiary btn-small">Small</button>
</div>

We are using classes to differentiate between the different types of buttons.

我们使用类来区分不同类型的按钮。

CSS (The CSS)

.btn is the main class used by all of our buttons:

.btn是我们所有按钮使用的主要类：

.btn {
    border-radius: 2px;
    border: 1px solid;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding: 8px 24px;
}

☝️ Some general styling to make it look better than the default version. ?

Some️一些常规样式使它看起来比默认版本更好。 ？

Next, we have the different states:

接下来，我们有不同的状态：

.btn-hover,
.btn:hover {
    opacity: 0.9;
}

.btn:disabled {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn:active {
    opacity: 1;
}

.btn:focus {
    outline: 0;
}

In order to have some difference between the states, we can play with the opacity property.

为了使状态之间有一些差异，我们可以使用opacity属性。

Initially the button has opacity: 1 and we reduce that opacity slightly when we hover over the button and then a little more when the button is disabled. When we click on the button though, we'll set the opacity back to 1 as it gives a nice effect.

最初，按钮具有opacity: 1 ，当我们将鼠标悬停在按钮上时，我们会稍微降低该opacity ，然后在disabled按钮时，会稍微降低opacity 。 但是，当我们单击按钮时，我们会将不透明度设置回1，因为它会产生很好的效果。

For the focus state, we remove the default outline property and we'll add a box-shadow property instead, but we'll do this separately for each button type because the color is changing depending on the class (see below).

对于focus状态，我们删除了默认的outline属性，而是添加了box-shadow属性，但是我们将针对每种按钮类型分别执行此操作，因为颜色根据类的不同而有所变化(请参见下文)。

The individual colors are set to the .btn-primary, .btn-secondary and .btn-tertiary classes:

各个颜色设置为.btn-primary ， .btn-secondary和.btn-tertiary类：

.btn-primary {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.btn-primary:disabled {
    color: var(--primary-color);
}

.btn-primary:focus {
    box-shadow: 0 0 5px var(--primary-color);
}

.btn-secondary {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}

.btn-secondary:disabled {
    color: var(--secondary-color);
}

.btn-secondary:focus {
    box-shadow: 0 0 5px var(--secondary-color);
}

.btn-tertiary {
    border-color: var(--tertiary-color);
    background-color: var(--tertiary-color);
}

.btn-tertiary:disabled {
    color: var(--tertiary-color);
}

.btn-tertiary:focus {
    box-shadow: 0 0 5px var(--tertiary-color);
}

As you can see we use the CSS variables method to set the same color on different properties. But for this to work, we need to declare the color variables on :root as follows:

如您所见，我们使用CSS变量方法在不同的属性上设置相同的颜色。 但这要起作用，我们需要在:root上声明颜色变量，如下所示：

:root {
    --primary-color: #3457dc;
    --secondary-color: #ea4d67;
    --tertiary-color: #ea674d;
}

Note that it’s good practice to add the :root declaration in the top of the css file.

请注意，在CSS文件顶部添加:root声明是一种好习惯。

Lastly, let’s add the two extra sizes; .btn-large and .btn-small classes:

最后，让我们添加两个额外的尺寸； .btn-large和.btn-small类：

.btn-large {
    font-size: 16px;
    padding: 12px 36px;
}

.btn-small {
    font-size: 12px;
    padding: 4px 12px;
}

结论 (Conclusion)

See how easy it is to create a Buttons UI Kit? ?

看看创建Buttons UI Kit有多么容易？ ？

As a bonus features you can add a ripple effect to the buttons via JavaScript. I did this in a previous article - you can check it out by clicking here!

作为一项额外功能，您可以通过JavaScript在按钮上添加ripple effect 。 我在上一篇文章中做了这个-您可以通过单击此处进行检查！

I hope you liked this challenge and I can’t wait to see what you’re going to create!

希望您喜欢这个挑战，而我迫不及待想看看您要创造什么！

Happy Coding! ?

编码愉快！ ？

Originally published at www.florin-pop.com.

最初在www.florin-pop.com上发布。

翻译自: https://www.freecodecamp.org/news/how-to-create-a-buttons-ui-kit-fdd354ee0815/

web ui 套件