Cool button hover animation using CSS

Want a Cool button hover animation in CSS like this ??

Step 1. Create a button in HTML and give it a class name.

Step 2. In CSS, add the button style and transition property

    .(Your_button_name){

            background-color: white;

            border: 2px solid black;

            color: black;

            padding: 10px;

            border-radius: 4px;

            font-size: 16px;

            margin-right: 10px;

            transition: all 0.3s ease-in-out;

    }

The transition property is the reason for a smooth transition.

Step 3. Now add the hover effect to the button

    .(Your_button_name):hover{

            border: 2px solid #523BF3;

            background-color: greenyellow;

            border-radius: 60px;

    }

That's all, You have added the animation to the button. Time to flex.