Archived topic
Global Button colors
5 replies · Started by Matthias on May 30, 2022
Hi there,
i was wondering how the global colors for buttons work ( i use generateblocks for adding those).
Somehow the colors i choose are different from the ones shown when i add a block without any colors.
I could set this easily for each button - but i wonder why the global settings are not used.
Basically i want the button colors to be as shown in the link attached - but when hovered on they should swith colors (text color should simply switch with other button colors on hover and the other way round).
Do you have an idea why it behave as it does on hover (it looks like opacity is changing)
Hi Matthias,
GB button's style is not controlled by the theme settings.
If you have GB pro, you can set up a global style for button, then apply it to all the GB buttons.
If you don't have GB pro, you can use this PHP snippet to remove GB's default style (the blue background/white text/paddings).
add_filter( 'generateblocks_default_block_styles', function( $styles ) {
$styles['button']['backgroundColor'] = '';
$styles['button']['textColor'] = '';
$styles['button']['backgroundColorHover'] = '';
$styles['button']['textColorHover'] = '';
$styles['button']['paddingTop'] = '';
$styles['button']['paddingRight'] = '';
$styles['button']['paddingBottom'] = '';
$styles['button']['paddingLeft'] = '';
return $styles;
} );Adding PHP: https://docs.generatepress.com/article/adding-php/
Then you can add button as additional CSS class for GB button, in this way, the GB button will use theme button's style.
https://www.screencast.com/t/RNvEN64ffmHh
ah ok - thx a lot.
Then a followup - i used contact form7 in my footer- where the forms come with a submit button that is controlled by the theme. So there the colors work.
Is there a way to use gb there - or some other way to style the button like the other ones (meaning mostly: round corners and a frame)
Hi Matthias,
You would need custom CSS to alter the design of the form7 submit button.
Here is a CSS you may try adding in Appearance > Customize > Additional CSS:
input.wpcf7-form-control.wpcf7-submit {
padding: 15px 50px;
border-radius: 10px;
border-style: solid;
border-width: 2px;
}If you want to alter the border color as well, and it’s not being altered in the customizer, use this instead:
input.wpcf7-form-control.wpcf7-submit {
padding: 15px 50px;
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--main-01);
}Hope this helps!
thx a lot.
You’re welcome Matthias!
