[Resolved] trying to recreate this button

[Thierry]

Hi,
Please look at: https://parachutedesign.ca then scroll down to just above footer area where it says: Let’s make something.
Under Global Styles > Buttons “SECONDARY BUTTON” i am trying to recreate an exactly similar button which is transparent in normal state and shows gradient on hover.
(please don’t touch primary, that one is fine).

Can you please assist me on how to achieve this?
(bare in mind i have zero knowledge or understanding of CSS… sorry)

Thank you.

Thierry

[Ying]

Hi Thierry,

We can’t help you build the button and GB doesn’t come with 3 colors gradient options.

You will need to add custom CSS for the button to achieve the same effect.

.gb-button-secondary:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
    width: 0%;
    z-index: 1;
    background: linear-gradient(287deg,#f70b7f 3%,#9a249c 52%,#4f0dcf 97%);
} 
.gb-button-secondary:hover:after {
    width: 100%;
}
.gb-button-secondary:before {
    background: #fff;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: 2px;
    top: 2px;
    z-index: 1;
    content: "";
    position: absolute;
}

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

[Thierry]

Hello Ying,

thanks for coming back to me so quickly.
Just for my understanding:
You can’t help me BECAUSE it’s a 3 color gradient button?
Or is the fact that’s it’s a 3 color gradient button just an EXTRA reason that you can’t help me?

The reason i’m asking is because i actually didn’t even notice that the button i showed you on https://parachutedesign.ca is a 3 color gradient button. Indeed, i would be perfectly fine with just a 2 color gradient button.

So, just to make sure i understand correctly: Would you be able to recreate that button in GB (without CSS) if it was just a 2 color gradient?

I don’t mind working with the CSS you gave me. Pretty easy to make that CSS work for 2 colors instead of 3.
But as i want to learn GB i’d be curious to know how you would do it if it was possible (without CSS, and for just a 2 color gradient).

[Thierry]

Sorry… i was too fast. I can’t get the CSS code you gave me to work. Would you mind checking what i did? I just copied and pasted the code you gave me in the Additional CSS area of the Customizer. Looks like i’m missing something somewhere though as i can’t see any effect on my Global Styles > “Buttons” page > Secondary button.

Would appreciate if you could look into it Ying.

Thank you.

[Ying]

You can’t help me BECAUSE it’s a 3 color gradient button?

No, we are not supposed to edit users’ sites, unless it’s a staging site and for debugging purposes.

Looks like i’m missing something somewhere though as i can’t see any effect on my Global Styles > “Buttons” page > Secondary button.

I found a typo in my CSS, I’ve updated it, please try the updated CSS.

The effect won’t show in the editor mode as the editor is not loading the CSS from the additional CSS field.

Can you try apply the global style to a button on a page?

[Thierry]

“No, we are not supposed to edit users’ sites, unless it’s a staging site and for debugging purposes.”

Ow ok, gotcha. Fully understand.

I copied the new code you sent. Applied to same button on this page: https://gen.leadway.be/ Scroll down, it’s an exact copy of the parachutedesign.ca page i showed you and which i’m trying to copy.

I set my button to “global style” and then selected “secondary” from the dropdown but look what it does.
Something messed up.

[Ying]

Add this CSS as well:

.gb-button-secondary {
    position: relative;
}

And can you add a link to the button?

[Thierry]

Hello Ying,

Don’t shoot me please but i realise i wasn’t paying attention yesterday and that my initial post was not clear…

Actually, what i want and what i should have explained more clearly is my secondary buttons
– to have the exact same 2 color gradients as the button you can see in the hero section here: https://gen.leadway.be
– to have the same simple transition effect as that same button (not the sliding effect)
– but to be an inverted version (hover & normal) of that button, just like you can see they did here in the area just above the footer area where it says “let’s make something” https://parachutedesign.ca

I’m sincerely sorry for the waste of time this cost you. As i said, i first should have formulated my O.P. better and then yesterday i should have paid more attention to what we had already achieved as i could have noticed my mistake earlier.

Hope you can and are still willing to help me out nevertheless.

[David]

Hi there,

do you mean this button?

https://www.screencast.com/t/UzNfQ921

[Thierry]

Hi David,
no. That will be my tertiary button. I’m now trying to achieve the secondary button of my dreams 😉

1) My primary is the one just below the Hero title. The one with white background and 2 color gradient in normal state and with full 2 color gradient background on hover.
That button was achieved with GB > Effects > Box-shadow… and just one line of CSS.

2) I want my secondary button to be just the same but with the normal and hover states just inverted. So normal state should be full 2 color gradient background and on hover it should be transparant (or white) background and only the border should be that same 2 color gradient. Just in the same way as my primary button shows, but inverted 🙂
You can see how they did the same “inversion” on the website i’m copying: https://parachutedesign.ca Except they are using 3 color gradients and i’m using 2 color gradients and different colors obviously.

I hope this clarifies it/ Thank you for your help.

[David]

If i understand correctly you just need to invert your box-shadow hover effect ?

This is the current primary effect.

gb-button-primary: box-shadow: inset 2px 1000px 1px 0 var(--white);

gb-button-primary > hover: box-shadow: 0 0 0 0 rgba(0,0,0,0.1); 

If you create the effect in reverse eg.

gb-button-secondary: box-shadow: 0 0 0 0 rgba(0,0,0,0.1);

gb-button-secondary > hover: box-shadow: inset 2px 1000px 1px 0 var(--white);

[Thierry]

Hi David,
That’s correct!
I added the Effects to my secondary button under Global Styles but this is what i get now:

https://gen.leadway.be/contact/ (the button in the dark area just under “Let’s make something”)

I see two issues:
– i can’t get the background to be transparant on hover.
– on normal state i still see this weird border appearing, as if the button is in 3D.

Can you please help me fix these?
Thank you.

[David]

Aah, not possible using that method.
Instead just add a gradient border to the button.
Keep your GB buttons border styles.
And add this CSS to make the border a gradient:

.gb-button-secondary {
    border-image-source: linear-gradient(140deg, var(--secondary-accent), var(--primary-accent));  
    border-image-slice: 1;
}

Now you set the background to a gradient, and then make the background transparent on hover.

[Thierry]

Added the last bit of CSS, but what precisely do you mean by “Keep your GB buttons border styles”?

[Thierry]

Actually, as you can see here: https://gen.leadway.be/contact/ the only last bit we need to correct is to set the background on hover to transparent.

[Author]

Posts