removing duplicate code

https://codesandbox.io/s/yp29qoyvyx

by Swedish_li

HTML

<div class="btn">Hover me</div>
	<div class="btn red">Hover me</div>
	<div class="btn teal">Hover me</div>
	<div class="btn orange">Hover me</div>
	<div class="btn green">Hover me</div>

CSS

body {
  margin: 15px;
  font-family: sans-serif;
  background-color: #f0f8ff;
}

.btn {
  border: 2px solid var(--color, black);
  background: white;
  font-size: 1em;
  line-height: 2em;
  border-radius: 2px;
  margin-bottom: 5px;
  text-align: center;
}

.btn:hover {
  cursor: pointer;
  background: var(--color, black);
  color: white;
}

.btn.red {
  --color: red;
}

.btn.yellow {
  --color: yellow;
}

.btn.green {
  --color: green;
}

.btn.orange {
  --color: orange;
}

.btn.teal {
  --color: teal;
}