Creating Component Variations using CSS Variables
We'll cover the following...
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:
...