<h3>1. :hover</h3>
<div>BOX</div>
<h3>2. :active</h3>
<button>BUTTON</button>
<h3>3. :focus</h3>
<input type="text" placeholder="입력"></input>
div {
  width: 100px;
  height: 100px;
  border: 3px solid black;
}
div:hover {
  width: 200px;
  height: 200px;
  background-color: lavender;
}

button {
  width: 100px;
  height: 50px;
  border: 3px solid black;
  border-radius: 5px;
}
button:active {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

input {
  width: 100px;
  height: 30px;
}

input:focus {
  width: 200px;
  height: 60px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.