How to Apply Gradient Animation Effects on button background in CSS - Hover Gradient Animation

Creating a background gradient animation effects using css is quite tricky, however not that complicated. While working on HTML and CSS projects you might have tried to animate or apply transition to gradients, so that you can smoothly transition from one gradient to another. However, you might have surprised to seen that your default transition didn't work as you were expecting.
But the same CSS transition duration, transition property and transition timing function worked well for transitioning the background-color property but it didn't worked for the background-image where you have gradients are applied and you want to switch or transition from one gradient to another smoothly.
This is because background-image is non-animatable property in CSS. We can't simply apply the normal transition properties to smoothly transition the gradients.

In this video I will show you how you can easily animate gradients using the background-position and background-size properties. Though, it would not be a real animation or transition. We would just be simulating the transition effect by combining some interesting CSS transition properties.

00:00 Gradient Background Animation on Button Effect
3:35 Solution to apply gradient animation or transition on a button.

Finished Source Code:
https://codepen.io/smashtheshell/pen/...