Calling a CSS class inside another class?

You can't actually do a reference (one of CSS's major failings), but you can do this:

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

The comma means that the definitions in the body of Block A apply separately to each of those selectors, and so they apply to any ".btn" elements that are ":active", and separately apply to any ".red" elements.

Block B and Block C are optional. They're for any definitions you only want to apply to the given selector. You usually list these after Block A because rules of equal specificity are applied top-to-bottom, so you can override anything from Block A that you want to in Block B or Block C, and those blocks will "win".