Nice Buttons
Generate beautiful gradient hover effects
Choose a starting color above and a pattern below.
You can also drag the numbers to make your own pattern.
How does this work?
We simply have a gradient background-image that is larger than the button. On
hover, we transition the background-position.
Try playing around with the relative background-size and see how it affects the button.
The effect is subtle, but you can think of it as a zoom factor.
Larger numbers makes the individual colors more distinct.
Notice how setting the size to 1x makes the gradient fill the button.
In this case there's no space to transition anything and you just get a static gradient background.
Compare that to 5x where the transition is much more pronounced. I think somewhere around 3-4x is the sweet spot, depending on what effect you're going for.
Depending on the gradient angle, we sometimes need to adjust the initial and final background-position.
.brand-gradient {
background-image: linear-gradient(
to bottom right,
#1c7ed6, #7048e8, #d6336c, #f76707
);
color: #fff;
background-size: 300% 300%;
background-position: 0% 0%;
transition:
background-position 0.7s,
translate 1s;
&:hover {
translate: 0 -0.25rem;
background-position: 100% 100%;
}
}