# Rounded Buttons Through theme.json

> Sets the shape, padding and weight of all buttons (Button block, search and form buttons) in a block theme through theme.json, including a darker hover color.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, buttons, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-button-style/

## Code

```php
// Button style.
$wpide_button = array(
    'radius'     => '999px',
    'background' => '#111827',
    'text'       => '#ffffff',
    'hover'      => '#374151',
);

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_button ) {
    return $theme_json->update_with( array(
        'version' => WP_Theme_JSON::LATEST_SCHEMA,
        'styles'  => array(
            'elements' => array(
                'button' => array(
                    'border'     => array( 'radius' => $wpide_button['radius'] ),
                    'color'      => array( 'background' => $wpide_button['background'], 'text' => $wpide_button['text'] ),
                    'spacing'    => array( 'padding' => array( 'top' => '0.75em', 'bottom' => '0.75em', 'left' => '1.5em', 'right' => '1.5em' ) ),
                    'typography' => array( 'fontWeight' => '600' ),
                    ':hover'     => array( 'color' => array( 'background' => $wpide_button['hover'], 'text' => $wpide_button['text'] ) ),
                ),
            ),
        ),
    ) );
} );
```

## Notes

Set the radius to 4px for slightly rounded corners or 0 for square buttons.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Rounded Buttons Through theme.json" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/