Pure css to make a button shine and gently change colors over time

Video of the subscribe button in action: its slowly shifting gradient backgrounds, and how it grows and shines when a user hovers over it.

Shifting gradient backgrounds

Your basic button CSS — nothing too fancy here.
The CSS to create the background gradients for the button and then animate the movement with the help of CSS keyframes animation.

Shine animation on hover

p::first-line {
color: blue;
text-transform: uppercase;
}
The pseudo-element CSS for the button to make the shine effect and make it slide across the button on mouseover.
&::before, 
&::after {
transform: translateX(300px) skewX(-15deg);
transition: 0.7s;
}

Putting it altogether

The complete CSS for the button in one place. From basic styling, to background gradients, to shine effects.

Comments are closed.