CSS transitions allow you to create smooth, gradual changes between different values of a CSS property. Instead of a property like background-color or width changing instantly, a transition lets that change happen over a period of time, making the effect more visually appealing and providing users with helpful feedback. This is especially useful when you want to signal interactivity, such as when a button changes color as a user hovers over it. Transitions can be applied to many CSS properties, including color, size, spacing, and more, but only properties that have an intermediate state can be transitioned. You typically use transitions to improve the user experience by making state changes feel more natural and less abrupt.

In this example, the button uses the transition property to specify that the background-color should change smoothly over 0.4 seconds when the user hovers over the button. This creates a more engaging and dynamic interface, making it clear that the button is interactive and responding to user actions.