Creating Component Variations using CSS Variables
We'll cover the following...
Consider the case where you need to build two or more different buttons. Same common base styles, just a bit of difference between the buttons.
Below is an example, and do not forget to hover over the buttons too.
In this case, the properties that differ are the background-color and border-color of the variants.
So, how would you do this?
Here’s the typical solution.
Create a base class, say .btn and add the variant classes. Here’s an example markup:
...