How to style Buttonizer using a custom CSS ( Classnames explanation )

James

Static Classes

To style your buttons using a custom CSS, you will need to know which class name or ID you will need to use for your class selector.

The Buttonizer buttons have a static class name and a randomly generated class name. The randomly generated class name changes every time you make changes in the editor, so you should not use this class name as your custom styling will disappear.

Here is a list of the default static class names with their hierarchy:

.buttonizer .buttonizer-group {
  /* Button group */
  .buttonizer-head {
    /* Menu button */
  }
  .buttonizer-button {
    /* All buttons including menu button */

    i, img {
      /* Button icons */
    }

    .buttonizer-label {
      /* Button labels */
    }
  }
}

For example, if you would like to change the font weight of your label, your custom CSS should look something like this:

.buttonizer .buttonizer-button .buttonizer-label {
   font-weight: 900;
}

Specifying Groups/Buttons (Custom Class and ID)

If you would like to create a custom CSS for a specific button, you can use the Custom Class or Custom ID setting to be more specific on the selector of your custom CSS.

To create a custom class or custom ID, go to the button's settings and then go to the Style tab. From there, scroll down and open the Custom ID & Custom Class group.

You can then use the custom class in your custom CSS:

.customClass .buttonizer-label {
  font-weight: 900;
}