.alternative {
  display: flex;
  margin: 0.5rem 0;
  background: #666a99;
  color: #fff;
  transition: all 0.3s;
  border-radius: 2px;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset,
              0 2px 1px 0 rgba(0, 0, 0, 0.2);
  composes: border from "css/border.css";
}

.alternative:last-of-type {
  margin-bottom: 0;
}

.alternative:hover {
  background: #8588ad;
}

.selected {
  background: #474a6b;
}

.selected:hover {
  background: #52557a;
}

.disabled {
  box-shadow: none;
  background: #f5f5f5;
  color: #555;
}

.disabled:hover {
  background: #f5f5f5;
}

.alternative label {
  flex-grow: 1;
  padding: 1rem;
}

.alternative input {
  display: none;
}

.alternative {
  display: flex;
  margin: 0.5rem 0;
  background: #666a99;
  color: #fff;
  transition: all 0.3s;
  border-radius: 2px;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset,
              0 2px 1px 0 rgba(0, 0, 0, 0.2);
  composes: border from "css/border.css";
}

.alternative:last-of-type {
  margin-bottom: 0;
}

.alternative:hover {
  background: #8588ad;
}

.selected {
  background: #474a6b;
}

.selected label:after {
  content: "✓";
  float: right;
}

.selected:hover {
  background: #52557a;
}

.disabled {
  box-shadow: none;
  background: #f5f5f5;
  color: #555;
}

.disabled:hover {
  background: #f5f5f5;
}

.alternative label {
  flex-grow: 1;
  padding: 1rem;
}

.alternative input {
  display: none;
}

Add checkmark after selected button
Add checkmark after selected button

Add checkbox after selected button, to indicate that it is selected, therefore montitors with bad contrast can still see what is active/selected.
