How to create a Buttons UI Kit

Florin Pop
Apr 19, 2019 · 3 min read

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

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 ripple effect, animating buttons, etc — the sky is the limit 🚀. Be creative! You know how much I value creativity! 👍

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:

  1. Default 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.

The HTML

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:

☝️ 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:

Conclusion

See 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.florin-pop.com.

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store