A Complete Guide to Creating Reusable Button Styles with GenerateBlocks Pro

under construction WordPress Buttons are one of the most common interaction elements when it comes to websites. To improve design consistency and maintenance efficiency, the use of GenerateBlocks pro's Global Styles（The (Global Styles) feature helps you create a set of reusable, centrally manageable button styles.

This article will take you step by step through the process of creating, optimizing and reusing button styles.

Why use Global Styles?

While traditional button styling needs to be manually adjusted on each page or module, GenerateBlocks Pro provides a global styling system that lets you set it once and reuse it in multiple places. Whether you need to create primary buttons, secondary buttons, or link buttons, all can be centrally managed and quickly maintained.

Second, create the first button style (Primary)

Step 1: Add the button element

• Edit any page or article
• Add button blocks for GenerateBlocks (click on the button element with the blue icon)
• Set the button's display attribute inline-flexTo avoid misdisplay in the editor

Step 2: Create Global Style

• Click "Create Style", it is recommended to use prefixed class name, such as btn-primaryThe following are some of the most popular plug-ins in the world, reducing the probability of conflicts with other plug-ins

• Select "Start with blank"

Step 3: Setting Style Properties

• Background color: choose a dark brand color from the theme

• Border: 1px width, color matches the background

• Rounded corners: 100px, giving the appearance of rounded pill buttons

• Inner margins: top and bottom 1rem, left and right 2rem
• Text Style:
  • Color: white
  • Size: 1.125rem
  • Word weight: 500
  • Uppercase (Text Transform: Uppercase)

Step 4: Setting up the hover effect

• Click on the "Hover" tab to enter the hover state settings.
• Background color: change to a lighter shade of the same color

• Border color: synchronously updated to light color to avoid visual conflict

• Adding a shadow: generated using the box-shadow generator CSS Shadow code and paste

• Add transition animation: set a 0.2 second transition effect for the button to make hovering more natural.

Creating a reusable Box Shadow utility class

For ease of invocation, shadows can be set as a standalone style class

• New global style named shadow-primary

• Add Effect → Box Shadow → Paste Generator Code

• Simply add the class name to the button to use the same shadow effect

IV. Examples of button style variants

1. Secondary button style (Secondary)

• Background set to transparent

• Text color is the main brand color

• Fill background color on hover, text becomes white

• inheritable btn-primary The visual uniformity of the borders, rounded corners, inside margins, etc.

2. Link button style (Link)

• Border set to transparent

• Show only border color on hover, no background change

• Background color: change to transparent and border color to dark.

• When hovering, the border effect is displayed

• Effect when not hovering

V. Style Priority and Order Description

exist GenerateBlocks → Global Styles:

• Ability to view specific properties and states (default, hover) for each style class

• Similar to CSS, a class added later will override the style of the class before it.

• You can adjust the order of the classes by dragging them to control the priority of the styles to take effect.

VI. Advantages of unified maintenance and management

Once the button classes have been created, these style classes can be used directly anywhere on the site. Modify them once and the buttons are synchronized across the site, helping to improve efficiency and consistency.

Example:

• modifications btn-primary or rounded corners, all buttons that reference it will automatically synchronize the adjustment of the
• After updating the hover effect, you don't need to repeat the setting

concluding remarks

GenerateBlocks Pro's Global Style system is a useful tool for building modular button designs. Splitting and reusing properties such as the main button, shadow, border, color, etc. saves time and reduces repetitive actions.

If you're using GenerateBlocks to build the WordPress website, it is recommended that global button styling be part of the standard development process to help you quickly build uniformly styled website components.

Welcome to Photon Fluctuations for more WordPress efficient site building tutorials and design practice content.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off