<div>
  <button>버튼을 누르거나, focus가 되면 변해요!</button>
</div>
div {
  padding: 20px;
  text-align: center;
}
button {
  border: 1px solid #000;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: #fff;
  transition: all 0.2s;
}
button:focus {
  outline: none;
  color: red;
  border: 1px solid red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.