Let's compare this button to the one from the pseudo-classes topic and see exactly what one new line adds.
.btn { background: #1E2A5A; color: white; padding: 10px 20px; border: none; border-radius: 6px; transition: background-color 0.3s ease; }.
Everything here is identical to a plain hover button, except for one new line: transition: background-color 0.3s ease. Read it left to right: background-color names WHICH property should animate smoothly (not every property, just this one); 0.3s sets the duration the change will visibly take three-tenths of a second rather than happening instantly; ease describes the speed curve, starting gently, moving faster through the middle, and easing off at the end, rather than moving at one constant robotic speed.
.btn:hover { background: #3E5AA6; } is unchanged from before it still just declares WHAT the final color should be once hovered. The transition rule on .btn is what decides HOW the button gets there.
Without that transition line, hovering would snap instantly from navy to lighter blue with no visible motion at all try mentally removing it and picture the difference. With it, the exact same color change now reads as smooth and intentional, which is why professional buttons almost always pair :hover with a short transition.