* {
  box-sizing: border-box;
}

:root{
  --text-color: white;
  --border-radius: 15px;
}

.btn{
  padding: 2rem 4rem;
  background: transparent;
  font-size: 2em;
  border-radius: var(--border-radius);
  border: 2px solid var(--color, black);
}

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

.btn.red{
    --color: red;
}
.btn.yellow{
    --color: yellow;
    --text-color: black;
}
.btn.green{
    --color: green;
}

button{
  display: block;
  margin: 10px;
}