[Resolved] trying to recreate this button

[David]

Remove the gradient and background color for the button.

Then add it back with some CSS as a pseudo element:

.gb-button-wrapper .gb-button-secondary {
    position: relative;
}
.gb-button-wrapper .gb-button-secondary:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(140deg, var(--secondary-accent), var(--primary-accent));
    z-index: -1;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}
.gb-button-wrapper .gb-button-secondary:hover:before {
    opacity: 0;
}

This will allow you to transition the gradients opacity to 0 on hover.

[Thierry]

I’m confused..

this is what i have now:

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

.gb-button-wrapper .gb-button-secondary {
position: relative;
}
.gb-button-wrapper .gb-button-secondary:before {
content: ”;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(140deg, var(–secondary-accent), var(–primary-accent));
z-index: -1;
opacity: 1;
transition: opacity 0.3s ease-in;
}
.gb-button-wrapper .gb-button-secondary:hover:before {
opacity: 0;
}

Yet it still doesn’t work.

This is what i have as settings:

[David]

You have this CSS which is adding the box-shadow:

.gb-button-wrapper .gb-button-secondary:hover {
    box-shadow: inset 2px 1000px 1px 0 var(--white);
    transition: all 0.5s ease;
}

That needs to be removed.

The screenshot your provided returned a 404 error.

In the button settings you need to make sure that the Buttons Background Hover is Transparent.

[Thierry]

David,
I can’t thank you enough for putting up with me and my ignorance of CSS.
It now works exactly as i want it to! 👍
Have a nice day.

[David]

Happy to be of help 🙂

[Author]

Posts