How to create a Buttons UI Kit

????In this article we are going to build multiple buttons and put all of them in a Buttons UI Kit:Before we move to the implementation part, let’s see the different states in which a button can be:Default stateHover state — when the mouse is over the buttonActive state — when the button is pressedFocus 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.

Disabled stateWe 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.

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

The CSS.

btn is the main class used by all of our buttons:☝️ Some general styling to make it look better than the default version.

????Next, we have the different states: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: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: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:ConclusionSee how easy it is to create a 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!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.




. More details

Leave a Reply