Creating Component Variations using CSS Variables

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: