Celle retenue par l'auteur :

.fancy-button {
    --_color: var(--color, black);
    border: .1em solid var(--_color);
    background: transparent;
    color: var(--_color);
}

.fancy-button:hover {
    background: var(--_color);
    color: white;
}

L'avantage c'est qu'il est possible de définir --color ailleurs... et on est certain qu'il y aura une couleur par défaut.