Semantic CSS

HTML

<div>
  <input class="input" type="text" placeholder="Default value">
  <input class="input success" type="text" value="Valid value">
  <input class="input danger" type="text" value="Invalid value">
</div>
<button class="button">
  Default
</button>
<button class="button success">
  Success
</button>
<button class="button danger">
  Danger
</button>

CSS

.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #eee;
  cursor: pointer;
}

.input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.success {
  color: green;
}

.danger {
  color: red;
}

.button.success {
  border-color: green;
  background-color: lightgreen;
}

.button.danger {
  border-color: red;
  background-color: pink;
}

.input.success {
  border-color: green;
}

.input.danger {
  border-color: red;
}