Question

I have a css class that is called button.blue:

button.blue { background-color: blue; ... }
button.blue:active { background-color: darkblue; ... }
button.blue:hover { background-color: lightblue; ... }

To use it, I do the following:

<button class="blue">hello</button>

Now this allows me to have a blue button that has the text “hello” on it. I want to have blue buttons of all different sizes. I don’t want to repeat code. What is the best way to do this?

I’ve tried googling but my question is too vague I think for me to find an answer. I have tried searching for CSS nested classes, grouping, etc. and tried a few random things but nothing seems to work.

Answer 1

You could have some classes that are just sizes like

.big { width: 100px, height: 100px }
.small { width: 20px, height: 20px }

Then you would do

<button class="big blue">hello</button>