WorkPEI's buttons were styled by six different sources that don't know about each other, so the same "button" rendered in four shapes and two colours. An audit (October 2026, on workpei40) catalogued every button and where its CSS comes from, and buttons.css in the child theme now unifies them: one look (accent background, --accent-2 hover, white text, 50px pill, weight 500) in two sizes, Large for hero/CTA and Small for dashboards, forms and toolbars.
Audit findings (before):
| Button | Source | Rendered |
|---|---|---|
.gbp-button--primary / --secondary (home, Learn More, Styles page) |
GenerateBlocks global styles, uploads/generateblocks/style-global.css (loads site-wide) |
Red pill, 18px, plus a stray 1px border |
Apply for job (.application_button) |
WPJM core, overridden in wpjm-ajax-jobs.css |
Hard-coded #d55256, 12px radius, 18.7px |
Preview on Post a Job / Create Profile (input.button) |
GeneratePress defaults (--accent / --accent-2 from Customizer) |
Red, square, 17px |
| Candidate Registration submit | Gravity Forms with no form theme, so GP defaults | Red, square, 17px |
| Documentation, Add Team Member, Edit Company submit | Gravity Forms Orbital theme; per-form block colour #204ce5 | Blue, 3px radius, 14px |
Add Job on Manage Jobs (.jm-ui-button) |
WPJM ui.css (background is currentcolor, i.e. the GP link colour) |
Blue #1b78e2, 4px radius, 14px |
Also found: .gbp-button--primary is defined twice in the GB global stylesheet (an older hard-coded version and a newer one using --accent); the older one supplies the stray 1px border. Homepage buttons carry a garbled class gbp-buttonu002du002dprimary from an escaping glitch on an earlier save (harmless).
The solution:
generatepress_child/buttons.css, enqueued from functions.php by workpei_enqueue_buttons_css() on wp_enqueue_scripts at priority 99 (handle workpei-buttons, depends on generate-child, versioned by filemtime) so it loads after GP's dynamic CSS and the GB global stylesheet. The stylesheet was chosen over a GenerateBlocks global style so everything lives in one file and no GB button block is needed.
- Tokens in
:root:--btn-bg,--btn-bg-hover,--btn-fg,--btn-radius,--btn-weight,--btn-line-height, plus--btn-lg-*(1.125rem, .75rem/1.5rem) and--btn-sm-*(.9rem, .45rem/1.1rem). Editing these restyles every button. - Classes for content:
btn= large pill,btn btn-sm= small pill, on any link or GB Text/Headline. Existinggbp-button--primary/--secondaryblocks are large; addbtn-smto shrink one. - Large automatically: GB primary/secondary pills and the WPJM Apply button.
- Small automatically: GP default
input[type=submit],input.button,button.button,a.button(covers WPJM Preview and unthemed GF forms) and.jm-ui .jm-ui-button. Bare<button>elements are deliberately left alone (menu toggle, TinyMCE toolbars, Kanban rating stars). - Gravity Forms Orbital: rather than overriding GF's CSS, the tokens are fed into GF's own button variables on
body .gform_wrapper.gform-theme--framework(--gf-ctrl-btn-bg-color-primary,-hover-primary,--gf-ctrl-btn-radius,--gf-ctrl-btn-font-size(-md),--gf-ctrl-btn-padding-x(-md),--gf-ctrl-btn-size(-md), shadows off), so GF's states keep working. Orbital buttons are excluded from the generic rules with:not(.gform-theme--framework *). Variable names were verified against the installed GF version (3.1.3).
Verified result (stylesheet injected into live workpei40 pages): every audited button renders as the accent pill; Large is 18px / 48px tall, Small is 14.4px / 34px tall, including GF Orbital submits and WPJM Add Job.
Critical Configuration Note:
Specificity is deliberate. GB per-block CSS prints after the global stylesheet, so GB classes are prefixed with body. The Small section comes before Large so the WPJM Apply button (an input.button) wins the tie and stays large. The 12px-radius Apply rule in wpjm-ajax-jobs.css is now overridden and can be deleted. The GF per-form colour (#204ce5) still drives Orbital focus rings and checkboxes; set the accent colour in those forms' block settings for full consistency. The WPJM Applications Kanban plugin (v0.6.5+) uses gbp-button--primary btn-sm on its top bar and depends on this stylesheet for the small size.
