add separate color options for icons in buttons

Hi there,

You can change the button icon color by clicking your button in the back-end and then in the right sidebar go to Block -> Advanced and inside the ADDITIONAL CSS CLASS(ES) field, add a custom class like, for example, custom-color.

Then, you can add custom CSS code to alter the fill value, even for hover:

/* CSS to change the fill color */
.custom-color > .gb-icon > svg > path { 
  fill: red; /* Replace 'red' with your desired color */
}

/* CSS for hover effect */
.custom-color:hover > .gb-icon > svg > path { 
  fill: blue; /* Replace 'blue' with the desired hover color */
}

Reference: https://docs.generatepress.com/article/adding-css/.

Side note: There’s also feature request for this already. I’ll add a +1 for you so that it increases in priority of our Feature Request list.

Let us know how it goes 🙂 Thanks!

Hi Francisco – Please upvote this feature from me too. Anytime you can move CSS like this to the editor makes sense – especially when using Global Styles.

To link the color to the GP color palette, give this CSS a whirl. The variable color can be linked to whatever palette color desired, and it now has more global styling capabilities.

/* CSS to change the fill color */
.custom-color > .gb-icon > svg > path { 
  fill: var(--primary-accent); /* Replace 'primary-accent' with your desired palette color */
}

/* CSS for hover effect */
.custom-color:hover > .gb-icon > svg > path { 
  fill: var(--secondary-accent); /* Replace 'secondary-accent' with your desired palette color */
}

Thanks,
David