Create another x-btn class

Support
#1

Hey there,
I’d like to create another button class.
My regular button is black but I’d like to create another class that would be white and that I could easily call in the class field when I create a button.
Is that doable ?
Thank you a thousand times for your help !

[Edit]
I added color: hsl(0, 100%, 100%); border-color: hsl(0, 0%, 100%); in the Style field, but it would be more convenient to have a didicated class for that.

#2

Hey,

You can add a custom class to each button and apply a custom CSS code to apply this new style.

#3

@john
How do I do that ? I know this is possible…
What code should I add and where ?
I’d like to call a white-button class and be able to call it whenever I add a button somewhere if I want this button to be white instead of the normal black I use.

#4

Howdy @mvalle-canopee,

Thanks for writing in! If you want to add custom CSS to your theme, you have 2 ways of doing that: using a child theme or the theme’s built-in global CSS editor.

Using a Child Theme

To go the child theme route, you’ll need to download, install, and setup a child theme. All of which is outlined here in detail:

Once you do that, you’ll need to locate the style.css file within that child theme and add your custom CSS there for it to show up on your website.

Using the Built-In Global CSS Editor

If you choose to use the theme’s built-in global CSS editor, you will need to launch the builder, then go to Theme Options using the hamburger in the top left corner of the screen, then find the CSS button in that same bar once that page loads. Any CSS you add here will show up sitewide for you.

Adding the CSS

As for the CSS, you will need to implement this yourself and style it to your liking, but you would do something like the following:

.white-button {
  color: #000;
  background-color: #fff;
  /* additional styles as needed... */
}

If you run into a specificity issue and your styles are not getting applied correctly, you may need to add !important to each item you have for good measure to force the styling:

.white-button {
  color: #000 !important;
  background-color: #fff !important;
  /* additional styles as needed... */
}

Finally, to apply these styles, you would need to add the white-button class name into the Class input of the button you are working with in the builder.

Hopefully this helps to point you in the right direction…cheers!