The theme for week #6 of the Weekly Coding Challenge is:
“A button? 🤔” you might ask… Yes! A button! 😄
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:
- Default state
- Hover state — when the mouse is over the button
- Active state — when the button is pressed
- 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.
- Disabled state
We need to style the buttons to cover all these states.
Also, we’ll have three different button types:
tertiary and two extra sizes:
We are using classes to differentiate between the different types of buttons.
.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
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.
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
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;
See how easy it is to create a Buttons UI Kit? 😄
As a bonus features you can add a
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.