<doc>
  <div class='main-container'>
    <button>
      NORMAL<br />
      button
    </button>
    <button class="special">
      SPECIAL<br />
      button
    </button>
    <button>
      NORMAL<br />
      button
    </button>
  </div>
</doc>
button {
  color: black;
}
button::first-line {
  color: blue;
  text-transform: uppercase;
}

button:hover {
  height: 100px;
}

.special:hover {
  color: red;
  font-weight: 600;
}

.special:active {
  width: 400px;
}

.main-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.