Gradient Button

[Abhishek]

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.

[David]

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; 
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Abhishek]

I tried this but the hover effect is not smooth as it appears in: https://cssgradient.io/gradient-backgrounds

[David]

Editd the code above to include the transition: 0.5s; property

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Abhishek]

Thank you so much 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts