Title: Custom style button – theme.json
Last modified: November 4, 2024

---

# Custom style button – theme.json

 *  [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/custom-style-button-theme-json/)
 * Hey TT4
 * I am trying to style the global button from my TT4 child theme. Chat GPT propose
   something along those lines, however it takes no effect:
 *     ```wp-block-code
       	"styles": {		"elements": {			"button": {			    "color": "var(--wp--preset--color--draupnir-red)",                "backgroundColor": "var(--wp--preset--color--base)",                "border": "none",                "borderRadius": "16px",                "padding": "10px 15px",                "fontSize": "var(--wp--preset--font-size--medium)",                "cursor": "pointer",				":active": {					"boxShadow": [						{							"offset": { "x": 1, "y": 1 },							"blur": "2px",							"color": "var(--wp--preset--color--draupnir-shadow)",							"inset": true						},						{							"offset": { "x": -1, "y": -1 },							"blur": "2px",							"color": "var(--wp--preset--color--base-2)",							"inset": true						}					]				},				":focus": {					"color": {						"background": "var(--wp--preset--color--contrast-2)",						"text": "var(--wp--preset--color--base)"					},					"outline": {						"color": "var(--wp--preset--color--contrast)",						"offset": "0px"					},					"border": {						"color": "var(--wp--preset--color--contrast-2)"					}				},				":hover": {					"color": {						"background": "var(--wp--preset--color--contrast-2)",						"text": "var(--wp--preset--color--base)"					},					"border": {						"color": "var(--wp--preset--color--contrast-2)"					},					"boxShadow": [						{							"offset": { "x": -2, "y": -2 },							"blur": "5px",							"color": "var(--wp--preset--color--base-2)"						},						{							"offset": { "x": 2, "y": 2 },							"blur": "5px",							"color": "var(--wp--preset--color--draupnir-shadow)"						}					]				},				"spacing": {					"padding": {						"bottom": "0.6rem",						"left": "1rem",						"right": "1rem",						"top": "0.6rem"					}				},				"typography": {					"fontSize": "var(--wp--preset--font-size--small)",					"fontStyle": "normal",					"fontWeight": "500"				}			}		},
       ```
   
 * What did I miss and what is wrong?

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [ali622](https://wordpress.org/support/users/ali622/)
 * (@ali622)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/custom-style-button-theme-json/#post-18124733)
 * Instead of doing this why wouldn’t u use simply “site editor-> styles -> blocks-
   > buttons” to style it?
   (Don’t get me wrong, just asking.)
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/custom-style-button-theme-json/#post-18125071)
 * [@ali622](https://wordpress.org/support/users/ali622/)
    - because I run a multisite
    - I want all buttons initially to be as I want across all sites, hence, the 
      restyling in child theme, then I can edit individual buttons in settings, 
      where they appear.
    - I don’t have the style settings I need to do what I want. Either they are 
      not supported yet by theme.json ver 2/3 or simply not made available in WP/
      TT4 (box-shadow, text-shadow adding icons and more)
    - I want my style to survive the next update of TT4 and not get overwritten
    - While I want to inherit everything possible from a new theme, fx TT5, I want
      my customisation to stay intact after upgrade, hence a child theme
    - I have other reasons to go for child theme, such as custom variables. I need
      those to syle plugin’s css and ensure they update with a new style in TT4 
      or an upgrade of theme
 * I can go on, but that should give you an idea. And that makes me comment back:
   Howcome there is little to no replies for support. And when an answer arrives
   it’s like “Ask over there” or “Why dont you just style buttons 500 places, that
   get’s lost at updates or upgrades”. Don’t get me wrong, but this takes soooo 
   loooong time! I urgently need help to overcome these issues ok. I setup a child
   and that was a very very hard birth. Getting into theme.json is like knowing 
   nothing and starting over….
 * So MY MISSION IS TO INHERIT ALL I CAN FROM WP THEMES SUCH AS TT4 AND HAVE IT 
   ACCESSIBLE IN MY CHILD THEME. I WILL NOT START OVER EVERYTIME I SWITCH A THEME,
   SUCH AS STYLES, SETTINGS, CUSTOM PART PATTERNS AND TEMPLATES. I DO NEED MORE 
   STYLLING THAN THEME.JSON VER 3 CURRENTLY OFFERS, SO I STYLE FROM BOTH T.J AND
   STYLE.CSS
 * So please, I need help to manage child theme.json thx. I just need progress

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom style button – theme.json’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyfour/1.5/screenshot.
   png)
 * Twenty Twenty-Four
 * [Support Threads](https://wordpress.org/support/theme/twentytwentyfour/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentyfour/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyfour/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentyfour/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * 2 replies
 * 2 participants
 * Last reply from: [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * Last activity: [1 year, 7 months ago](https://wordpress.org/support/topic/custom-style-button-theme-json/#post-18125071)
 * Status: not resolved