How to Build a Button Design System in GenerateBlocks

In a previous video, I showed how to create a simple button design system in Figma. This post is a follow-up where I’ll demonstrate how to take that design and implement it in GeneratePress and GenerateBlocks.

With the release of GenerateBlocks 1.9 and GenerateBlocks Pro 1.7, the global styles system has been completely revamped. This new system makes it easier and more flexible to build reusable design systems directly in the editor. In this post, I’ll walk you through how to set up a button design system using these new tools.

Overview of the Button Design

Here’s what we’ll be building:

• Three button styles: Primary, Contrast, and Secondary.
• Hover states:
  • The Primary button gets a lighter background on hover.
  • The Contrast button gets a darker background on hover.
  • The Secondary button transitions from a semi-transparent background to a fully opaque one.

To achieve this, we’ll:

1. Create a generic button class (BTN) for shared styles.
2. Add modifier classes for the unique styles of each button type.

Step 1: Setting Up the Button Class

Adding the Button Block

Start by adding a button block to the page. By default, GenerateBlocks applies some block-level styles to the button, such as padding, background color, and text color. However, for a global style system, we want to move all styles to the class level.

Creating the BTN Class

1. Add a class to the button and name it BTN (short for “button”).
2. Select the option to move the local block styles to the class. This ensures the block itself has no styles applied, and everything is controlled by the class.

Styling the BTN Class

Now, let’s define the shared styles for all buttons:

• Padding: Set the padding to 1em on the top and bottom, and 2em on the left and right.
• Border Radius: Set the border radius to 6px.
• Text Color: Use a white color (base-0).

These styles will apply to all buttons that use the BTN class.

Step 2: Styling the Primary Button

Since the Primary button will be used most often, we’ll style it directly in the BTN class.

Adding the Background Color

1. Go to the Backgrounds panel.
2. Set the background color to your brand’s primary color.

Adding the Hover State

1. Switch to the hover selector.
2. Change the background color to a lighter version of the primary color (e.g., brand-alt).

At this point, the BTN class is fully styled as the Primary button.

Step 3: Creating the Contrast Button

Adding the Contrast Button

1. Add another button block to the page.
2. Apply the BTN class to inherit the shared styles.
3. Clear out the default block-level styles to ensure the class styles are applied.

Creating the Modifier Class

1. Add a new class called BTN--contrast.
2. Start with a blank style.

Styling the Contrast Button

The Contrast button only needs to override the background colors:

• Default Background: Set the background color to your contrast color.
• Hover Background: Change the background color to a darker version of the contrast color (e.g., contrast-alt).

Now, you can easily switch between the Primary and Contrast buttons by adding or removing the BTN--contrast class.

Step 4: Creating the Secondary Button

Adding the Secondary Button

1. Add another button block to the page.
2. Apply the BTN class to inherit the shared styles.
3. Clear out the default block-level styles.

Creating the Modifier Class

1. Add a new class called BTN--secondary.
2. Start with a blank style.

Styling the Secondary Button

The Secondary button has a semi-transparent background that becomes fully opaque on hover.

1. Default Background: Set the background color to white with 10% opacity.
2. Hover Background: Change the background color to fully opaque white.
3. Hover Text Color: Change the text color to your brand’s primary color.

Step 5: Adding a Transition Effect

Currently, the hover states change instantly. To add a smooth transition:

1. Select any button and go to the BTN class.
2. Under the Effects panel, add a transition:
   • Property: All.
   • Duration: 0.3 seconds.
   • Timing Function: Ease-in-out.

This transition will apply to all buttons using the BTN class, creating a smooth hover effect.

Why This System Works

By separating shared styles into the BTN class and using modifier classes for unique styles, this system is:

• Flexible: You can easily add new button styles by creating additional modifier classes.
• Consistent: All buttons share the same base styles, ensuring a cohesive design.
• Scalable: Changes to the BTN class automatically apply to all buttons, saving time and effort.

Final Thoughts

The new global styles system in GenerateBlocks makes it easier than ever to create reusable design systems directly in the editor. While it may take some time to adjust to this new workflow, the benefits in terms of flexibility and efficiency are well worth the effort.

If you’re building a website with multiple button styles, I highly recommend setting up a system like this. It will save you time and ensure your designs remain consistent across the entire site.