A Tale of Two Buttons

The target button designs
<MyButton><MyButton inverted="true">
.button {
/* Apply default button styles here */
}
.container--inverted .button {
/* Apply inverted button styles here */
}
.button {
font-size: inherit;
}
/* The existing active state styles */.button:active {
color: darkred; /* This is the same as the body text color! */
background-color: cornsilk; /* Same as the body bg! */
}
.container--inverted .button:active {
color: cornsilk; /* Same as inverted container's text color! */
background-color: darkred; /* Same as inverted bg! */
}
/* Use the cascade, Luke! */.button:active {
color: inherit;
background-color: inherit;
}
.container--inverted .button:active {
color: inherit;
background-color: inherit;
}
/* Yipee! Less code */.button:active {
color: inherit;
background-color: inherit;
}
<!-- Yo dawg, I heard you like buttons... --><button class="button" type="button">
:root {
--fg-color: darkred;
--bg-color: cornsilk;
}
body {
color: var(--fg-color);
background-color: var(--bg-color);
}
.container--inverted {
--fg-color: cornsilk;
--bg-color: darkred;

color: var(--fg-color);
background-color: var(--bg-color);
}
button {
border-color: darkred;
color: cornsilk;
background-color: darkred;
}
.container--inverted button {
border-color: cornsilk;
color: darkred;
background-color: cornsilk;
}
button {
border-color: var(--fg-color);
color: var(--bg-color);
background-color: var(--fg-color);
}
.container--inverted button {
border-color: var(--fg-color);
color: var(--bg-color);
background-color: var(--fg-color);
}
button {
border-color: var(--fg-color);
color: var(--bg-color);
background-color: var(--fg-color);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store