In this tutorial, we will be talking about CSS transitions. So first of all, we should know,

 What is the CSS transition property? And what can it do for us?

 Well, transition is a CSS property applied to a specific element to make other properties of this specific element change smoothly over a given duration or animated in a nice way when hovering over,

Let's understand with an example:

<button>css Example</button>

    You can see right here I have a simple button and here in my CSS:

button{
width:20rem;
height:5rem;
background-color: #54483a;
border: none;
outline: none;
color: #fff;
}
button: hover{
    background-color: rgba(23, 128, 23, 0.856);
}

write the above code in an editor and see the effect. Now you can see when you hover over the button the color changes to some other color, and when I move my mouse away,
the background color returns to the original one. cool!😎
 But you may have noticed that this change is happening so fast. It looks like an on-and-off switch.
   
I think it will look much better if this change happens more smoothly, and that's exactly what CSS transition can do for us.
"So we said that the transition makes the change of  the CSS properties occur smoothly over a specific period of time."

In order to define a transition we need to use at least two things:

1.  The first is the CSS property that will change from the initial state to the final state, is called the transition property, which is the property you want to apply the transition to or make the change smooth or nice. In our case is the background color.
2. The second one is a transition duration, which is the span of time that the property will take to change from the initial state to the final one.

 button{
width:20rem;
height:5rem;
background-color: #54483a;
border: none;
outline: none;
color: #fff;
/* This is property for smooth transition*/
transition-property:background-color;
transition-duration:.2s ; 
}
button: hover{
    background-color: rgba(23, 128, 23, 0.856);
}

Now when I go and hover over the button, you can see that the change occurs smoothly in a nice way and is much better than before the transition was applied.