Tutorial: animate a button with CSS transitions

Buttons that don't react to anything feel dead. With a couple of lines of CSS you'll make yours feel alive (no JavaScript needed, surprise).

Step 1: the base button

<button class="button">Click me</button>

.button {
  background-color: #00e5bf;
  color: #0b1620;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}

Step 2: add a smooth transition

.button {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  background-color: #20c9ac;
  transform: translateY(-2px);
}

transition tells the browser "when this property changes, animate it smoothly instead of jumping instantly". :hover defines what happens when the mouse is over it. The result: a button that "floats" slightly when hovered.

Step 3: add an effect on click

.button:active {
  transform: translateY(0) scale(0.97);
}

:active fires while you're holding the button down. That small shrink simulates the button really "sinking in" when pressed, like a physical button. Details like this are what make an interface feel polished instead of generic.

What did you just learn?

• How to use transition to animate property changes.
• How to use :hover and :active to react to user interaction.
• That you can achieve a lot of "interactivity" without writing any JavaScript.