<div class="container">
  <button class="transition-button">Hover Me</button>
</div>
.transition-button {
  transition: all 0.2s ease-in-out;
}

.transition-button:hover {
  transform: scale(1.1);
}

.container {
  text-align: center;
  height: 100%;
  width: 100%;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.