CSS Text Gradient On A Button - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

CSS Text Gradient On A Button

SA

SIHAME ALLALI

Template 3 years ago

I am trying using CSS to do something without any luck:

I want for the text of a button to have a CSS Text Gradient and on hover for the background color of the button to be a linear gradient.

I can do 1 but not both :(

https://www.pgtgroup.fr/index.php/fr/

for the button Contact Us [upper right]

Currently, I managed to get the button on hover to behave as I want with:

.sppb-btn.sppb-btn-default.sppb-btn-outline.btn-black:hover { background: linear-gradient(80deg, rgba(0,14,70,1) 0%, rgba(30,24,207,1) 35%, rgba(0,226,102,1) 100%);}

but if I add :

#sppb-addon-wrapper-1603870286770 .btn-black { background: -webkit-linear-gradient(22.5deg, #000e46, #1E18CF, #00E266); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

I get the desired colored text on a white button background with black outline but the Hover does not work ;(

Any idea/help would be amazing !

0
Website
https://www.pgtgroup.fr
9 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #91814

Hi @SIHAME.

Here is

.contact-us-button-bg {
    display: inline-block;
    padding: 12px 31px 12px 32px;
    border: 2px solid #252525;
    font-weight: 600;
}
.contact-us-button-bg:hover { 
    background: linear-gradient(22.5deg, #000e46, #1E18CF, #00E266);
}

.contact-us-button-text { 
    background: linear-gradient(22.5deg, #000e46, #1E18CF, #00E266); 
    background-clip: border-box;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
.contact-us-button-bg:hover .contact-us-button-text {
    background: linear-gradient(22.5deg, #ffffff, #ffffff, #ffffff);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Just to let you know:

For a linear gradient no longer needs -webkit- prefix

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #91542

Hi

Thanks for contacting us. When I hover the button then it seems like this. isn't it ok?

Screenshot 2022-11-02 at 10.43.53 PM.png

-Regards.

0
SA
SIHAME ALLALI
Accepted Answer
3 years ago #91545

Hi Mehtaz,

THAT is what I want for when you hover over it to visually synchronize with the logo of course

BUT when it is NOT on :hover, I want to be able to have the Contact Us be like the ACCUEIL [using CSS Text Gradient] with a white background...

And the BOTH conditions of regular with the CSS Text Gradient + :hover showing what you see is what I can't seem to find a way to do ;(

Thank you very much.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #91713

But its already seems like this on your site. I have just insert the CSS from your site. Then what's the issue? Could you please explain it a bit more?

0
SA
SIHAME ALLALI
Accepted Answer
3 years ago #91729

It is NOT as I described wanting it on the website.

The button Contact Us in the upper right hand corner when NOT hovering over it is in black letters, right?

That's not what I want, I want it to looking just like like Accueil with a blue to green color gradient.

That is what is missing - when I manage to get that to work, then the Hover effect no longer works.

I want both effects to work not one or the other.

0
Pavel
Pavel
Accepted Answer
3 years ago #91734

THAT is what I want for when you hover over it to visually synchronize with the logo of course BUT when it is NOT on :hover, I want to be able to have the Contact Us be like the ACCUEIL [using CSS Text Gradient] with a white background...

Hi. To achieve this, you need to make a button using HTML. It is impossible to do it using Button Addon.

There should be such a design

<a href="#" class="your-button-class">   <!-- for this element bg gradient on hover -->
    <span class="your-button-text-class">Contact Us</span>   <!-- for this element text gradient -->
</a>
0
SA
SIHAME ALLALI
Accepted Answer
3 years ago #91785

Hi Pavel,

I have tried what you suggested in the form of :

<a href="#" class="contact-us-button-bg"> <span class="contact-us-button-text">Contact Us</span>
</a>

with CSS:

.contact-us-button-bg:hover { background: -webkit-linear-gradient(22.5deg, #000e46, #1E18CF, #00E266); -webkit-background-clip: text; -webkit-text-fill-color: transparent;padding: 12px 0px 12px 0px;}

.contact-us-button-bg .contact-us-button-text { background: -webkit-linear-gradient(22.5deg, #000e46, #1E18CF, #00E266); background-clip: border-box;padding: 12px 31px 12px 32px;-webkit-background-clip: text; -webkit-text-fill-color: transparent;border: 2px solid #252525;font-weight:600;}

but on hover, it's not working...

The non hover state is as it should be (the text is showing a text gradient) - but on hover, the background does not turn gradient :(

HELP ?

Thanks.

https://www.pgtgroup.fr/index.php

0
SA
SIHAME ALLALI
Accepted Answer
3 years ago #91975

Hello Pavel,

THANK YOU so very much - I get it to be exactly what I wanted based on what you gave me. and thanks for the caniuse hint... I use it often - great resource !

0
Pavel
Pavel
Accepted Answer
3 years ago #91984

You are wellcome

0