Archived topic
Gradient Button
5 replies · Started by _blank on February 6, 2020
Viewing posts 1–6 of 6
Hi,
I used this CSS and it worked perfectly to add a gradient button link - https://generatepress.com/forums/topic/buttom-with-gradient-background/
But i just want to add a different color which i took from - https://cssgradient.io/gradient-backgrounds
.btn-grad {background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%)}
.btn-grad:hover { background-position: right center; }how can i do it? i want to change all buttons of website to this.
Hi there,
try this CSS:
.button {
background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%);
background-size: 200%;
background-position: left center;
transition: 0.5s;
}
.button:hover {
background-position: right center;
}I tried this but the hover effect is not smooth as it appears in: https://cssgradient.io/gradient-backgrounds
Editd the code above to include the transition: 0.5s; property
Thank you so much :)
You're welcome
This archived topic is closed to new replies.
