Introduction to CSS Transitions

CSS transitions make changes happen smoothly instead of instantly.

Basic syntax:

selector {
  transition: property duration timing-function delay;
}

Example:

<style>
button {
  background: coral;
  color: white;
  padding: 10px 20px;
  transition: background 0.3s ease;
}
button:hover {
  background: darkred;
}
</style>

<button>Hover Me</button>

Practice Task:
Create a button that smoothly changes size and background color on hover.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *