[Resolved] How to apply a transient-effect to a GB-Button?

[Sascha]

Hello,

please, allow me to handle this request here, since I use both GPP & GBP and would like to keep all my support tickets here.

I’d like to create a button, where the background changes as seen on this 4s clip: https://clips.macbay.net/conversations/9bc5a560-c5f2-56ea-9801-13e2e2df60f0

Can you please help me with this?

Thank you in advance and kind regards,
Sascha

[Fernando]

Hi Sascha,

This kind of effect isn’t possible with GB Pro. You’ll need custom CSS for that.

If you can provide the link to where we can find the button, we can try to provide code to produce something slightly similar.

[Sascha]

Thanks Fernando,

this is the site, where most buttons have this effect, which I need to replicate.

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

this the CSS:

.gb-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.gb-button::after {
    background: #000;
    content: "";
    height: 102%;
    left: -10%;
    position: absolute;
    top: 0;
    transform: skewX(20deg);
    transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    width: 0;
    z-index: -1;
}
.gb-button:hover::after{
    width: 120%;
}

You’re GB Button must have the following color settings:

Initial: Transparent Background, Black Text, Black 2px Border
Hover: Transparent Background, White Text, Black 2px Border

If you need different color backgrounds then you will need to give the button a CSS Class: eg. green-button and then use CSS to change its :after element eg.

.gb-button.green-button::after {
    background: #00f;
}

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

[Sascha]

Hey, thanks a lot, works very well!

Now I need to apply this to the “Newsletter” button on this site, which is added via Block-Element to the [generate_menu_bar_items]. The nav-menu is sticky and I have already applied some CSS via Customizer:

/* Sticky Menu Items Colour */
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick a:not([aria-label*='Close'])  {
    color: var(--contrast-2) !important;
}
.main-navigation.navigation-stick .main-nav ul li a:hover{
	text-decoration:underline !important;
}

.header-wrap #site-navigation .inside-navigation #primary-menu #menu-mainmenu > .menu-item > a:hover{
	text-decoration:underline !important;
}

The colours of this button (text & border) should behave exactly like on the original site, where it’s different on front- and sub-pages. I would probably use 2 Hook-Element2 to add the CSS for this button, one for front- and second for the sub-pages.

Can you help me with this?

Thank you in advance and kind regards,
Sascha

[David]

In your CSS this:

.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick a:not([aria-label*=’Close’]) {
color: var(–contrast-2) !important;
}

needs to be:

.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick li a:not([aria-label*='Close'])  {
    color: var(--contrast-2) !important;
}

The change is adding the li here: .main-navigation.navigation-stick li a so it won’t interfere with the button.

Then add this to restyle the navigation button when the nav is not sticky:

.main-navigation:not(.is_stuck) .menu-bar-items .gb-button {
    color: #fff;
    border-color: #fff;  
}
.main-navigation:not(.is_stuck) .menu-bar-items .gb-button:hover {
    color: #000;
}
.main-navigation:not(.is_stuck) .menu-bar-items .gb-button:hover:after {
    background-color: #fff;
}

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

[Sascha]

Prefect, thanks!

[David]

You’re welcome

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

[Author]

Posts