A Complete Guide to Creating Reusable Button Styles with GenerateBlocks Pro

02.4W+1212

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.

Image [1]-GenerateBlocks Pro Global Button Styling Tutorial: Creating Reusable Button Designs

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
Image [2]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

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
Image [3]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Select "Start with blank"
Image [4]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

Step 3: Setting Style Properties

  • Background color: choose a dark brand color from the theme
Image [5]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Border: 1px width, color matches the background
Image [6]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Rounded corners: 100px, giving the appearance of rounded pill buttons
Image [7]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Inner margins: top and bottom 1rem, left and right 2rem
  • Text Style:
    • Color: white
    • Size: 1.125rem
    • Word weight: 500
    • Uppercase (Text Transform: Uppercase)
Image [8]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

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
Image [9]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Border color: synchronously updated to light color to avoid visual conflict
Image [10]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Adding a shadow: generated using the box-shadow generator CSS Shadow code and paste
Image [11]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Add transition animation: set a 0.2 second transition effect for the button to make hovering more natural.
Image [12]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

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
Image [13]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Add Effect → Box Shadow → Paste Generator Code
Image [14]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • 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
Image [15]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Text color is the main brand color
Image [16]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Fill background color on hover, text becomes white
Image [17]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • inheritable btn-primary The visual uniformity of the borders, rounded corners, inside margins, etc.

2. Link button style (Link)

  • Border set to transparent
Image [18]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Show only border color on hover, no background change
Image [19]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Background color: change to transparent and border color to dark.
Image [20]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • When hovering, the border effect is displayed
Image [21]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Effect when not hovering
Image [22]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

V. Style Priority and Order Description

exist GenerateBlocks → Global Styles:

  • Ability to view specific properties and states (default, hover) for each style class
Image [23]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • Similar to CSS, a class added later will override the style of the class before it.
Image [24]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs
  • You can adjust the order of the classes by dragging them to control the priority of the styles to take effect.
Image [25]-GenerateBlocks Pro Global Button Styles Tutorial: Creating Reusable Button Designs

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
Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
WordPress TutorialWP Theme DecorationWP self-taught website builderWordPressWordPress Themes
# WordPress website builder# GenerateBlocks# Global Style
If you like it, support it.
kudos1212 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments