To achieve this behavior, I'll first add some background CSS properties to the btn-back class, and use the linear-gradient CSS function..btn-back { color: hotpink; border-color: hotpink; background: linear-gradient(90deg, hotpink 0 50%, transparent 50% 100%); background-size: 200%; background-position: 100%; }

By Using common class class:btn style the basic things, by setting its width value to 200px, height and line-height (To vertically center the text) values to 50px, top and bottom values of the margin to 30px and position value to relative and transition value for smooth animation effect.

There is, however, a way to trick CSS into doing what we want - we just make the background larger than the button, and move the background on hover. The result is an animated gradient effect on your buttons. Here are a few examples - you can take one of these and change the gradient colours and angle if you want: