How to create a Buttons UI

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!

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

To get in depth knowledge on UI, enrich your skills on UI online training Course

Maybe even more significant. Why? Buttons represent a call for action; so, they help website owners to make money. If you are a UI designer, you already know how significant buttons are. What you probably don’t know is that buttons can be also a designer’s signature.

Free Button UI Kits

You certainly know at least several useful UI Kits you use from time to time. They are great because, as a rule, contain everything you need to create a user-friendly interface. However, most of them are far from being free of charge which decreases the opportunity to use a couple of such kits for different projects. Still, there are some kits that are free (and are really awesome as well).

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.

To start a career with UI (User Interface), Please go through the link UI online training Hyderabad

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.

The CSS

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

.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. ?

Next, we have 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.

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.

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).

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

.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:

: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.

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

.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